From 1122dbd5b02e7ca7f3ccf0a4d63de3d4776022e2 Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 20:43:47 +0300 Subject: [PATCH 01/24] docs: Migration progress --- TOKEN_MIGRATION_REPORT.md | 400 +++++++++ scripts/migrate-plasma-giga-config-tokens.mjs | 806 ++++++++++++++++++ 2 files changed, 1206 insertions(+) create mode 100644 TOKEN_MIGRATION_REPORT.md create mode 100644 scripts/migrate-plasma-giga-config-tokens.mjs diff --git a/TOKEN_MIGRATION_REPORT.md b/TOKEN_MIGRATION_REPORT.md new file mode 100644 index 00000000000..b59e9d5f6fc --- /dev/null +++ b/TOKEN_MIGRATION_REPORT.md @@ -0,0 +1,400 @@ +# Token migration report + +Generated: 2026-03-27T17:14:56.031Z (repo root: `scripts/migrate-plasma-giga-config-tokens.mjs --all`) + +## Summary + +- **Packages in batch:** 17 +- **Total `.config.ts` files scanned:** 1314 +- **Files updated in this run:** 1 (subsequent `--all` runs show **0** here if configs are already migrated; use git history for the first full pass) +- **Triple-dash typo fixes in this run:** 0 files (`var(---x)` → `var(--x)`, only where matches existed) + +## Theme / token mapping notes + +| Package profile | Token import | PR | Notes | +| ------------------ | ----------------------------------------------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | +| `plasma-giga` | `@salutejs/plasma-themes/tokens/plasma_giga` | [#2637](https://github.com/salute-developers/plasma/pull/2637) | — | +| `plasma-homeds` | `@salutejs/plasma-themes/tokens/plasma_homeds` | [#2649](https://github.com/salute-developers/plasma/pull/2649) | — | +| `plasma-b2c` | `@salutejs/plasma-themes/tokens/plasma_b2c` | [#2651](https://github.com/salute-developers/plasma/pull/2651) | — | +| `plasma-web` | `@salutejs/plasma-themes/tokens/plasma_web` | [#2650](https://github.com/salute-developers/plasma/pull/2650) | — | +| `plasma-new-hope` | `@salutejs/plasma-themes/tokens/plasma_b2c` | [#2652](https://github.com/salute-developers/plasma/pull/2652) | Example / Storybook configs under `src/examples/components` (not `src/components`); same token bundle as plasma_b2c. | +| `sdds-bizcom` | `@salutejs/sdds-themes/tokens/sdds_bizcom` | [#2648](https://github.com/salute-developers/plasma/pull/2648) | — | +| `sdds-crm` | `@salutejs/sdds-themes/tokens/sdds_serv` | [#2647](https://github.com/salute-developers/plasma/pull/2647) | No sdds_crm token set in repo; package uses sdds_serv (see ViewContainer / tokens re-export). | +| `sdds-cs` | `@salutejs/sdds-themes/tokens/sdds_cs` | [#2646](https://github.com/salute-developers/plasma/pull/2646) | — | +| `sdds-dfa` | `@salutejs/sdds-themes/tokens/sdds_dfa` | [#2645](https://github.com/salute-developers/plasma/pull/2645) | — | +| `sdds-finai` | `@salutejs/sdds-themes/tokens/sdds_finai` | [#2644](https://github.com/salute-developers/plasma/pull/2644) | — | +| `sdds-insol` | `@salutejs/sdds-themes/tokens/sdds_insol` | [#2643](https://github.com/salute-developers/plasma/pull/2643) | — | +| `sdds-netology` | `@salutejs/plasma-themes/tokens/plasma_b2c` | [#2642](https://github.com/salute-developers/plasma/pull/2642) | Package depends on @salutejs/plasma-themes; re-exports plasma_b2c (not sdds-themes). | +| `sdds-os` | `@salutejs/sdds-themes/tokens/sdds_os` | [#2641](https://github.com/salute-developers/plasma/pull/2641) | — | +| `sdds-platform-ai` | `@salutejs/sdds-themes/tokens/sdds_platform_ai` | [#2640](https://github.com/salute-developers/plasma/pull/2640) | — | +| `sdds-sbcom` | `@salutejs/sdds-themes/tokens/sdds_sbcom` | [#2639](https://github.com/salute-developers/plasma/pull/2639) | — | +| `sdds-scan` | `@salutejs/sdds-themes/tokens/sdds_scan` | [#2653](https://github.com/salute-developers/plasma/pull/2653) | — | +| `sdds-serv` | `@salutejs/sdds-themes/tokens/sdds_serv` | [#2654](https://github.com/salute-developers/plasma/pull/2654) | — | + +## Known bugs fixed before migration (`var(---…)` typos) + +Some configs had **three (or more) hyphens** after `var(` (e.g. `var(---text-secondary-active)` instead of `var(--text-secondary-active)`). That is invalid CSS and broke the migrator’s `var(--*)` parser. + +> **First full batch (this repo effort):** 31 `*.config.ts` files under these packages were auto-corrected (`var(---x)` → `var(--x)`) before token migration. Re-running `--all` shows **0** in the table below unless new typos appear. + +- _(No triple-dash occurrences found in batch package configs during this run.)_ + +### Same typo elsewhere (not in this batch) + +Other trees outside the batch (e.g. ad-hoc fixtures) may still contain `var(---…)` until migrated or fixed separately. + +### Remaining `var(---…)` in batch packages (after this run) + +- None found under batch packages’ config roots (e.g. `src/components/`** or `src/examples/components/**`). + +## Per-package results + +- **Written this run:** `.config.ts` files the script saved in this invocation (still had `var(--*)` in a styled-components css template and every variable resolved). Usually **0** or small once the package is already migrated. +- **Configs importing theme:** count of `.config.ts` files under the config root whose source contains an import from that package’s theme module. Measured **after** the run; includes files not touched this run. + +### `plasma-giga` + +- **Token module:** `packages/themes/plasma-themes/src/tokens/plasma_giga/index.ts` +- **Import:** `@salutejs/plasma-themes/tokens/plasma_giga` +- **Config files:** 80 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 79 +- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **Failed (unresolved vars):** 0 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 76 + +Skipped (manual / non-css configs) + +- `packages/plasma-giga/src/components/Scrollbar/Scrollbar.config.ts` + +### `plasma-homeds` + +- **Token module:** `packages/themes/plasma-themes/src/tokens/plasma_homeds/index.ts` +- **Import:** `@salutejs/plasma-themes/tokens/plasma_homeds` +- **Config files:** 77 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 76 +- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **Failed (unresolved vars):** 0 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 73 + +Skipped (manual / non-css configs) + +- `packages/plasma-homeds/src/components/Scrollbar/Scrollbar.config.ts` + +### `plasma-b2c` + +- **Token module:** `packages/themes/plasma-themes/src/tokens/plasma_b2c/index.ts` +- **Import:** `@salutejs/plasma-themes/tokens/plasma_b2c` +- **Config files:** 92 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 80 +- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **Failed (unresolved vars):** 11 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 77 + +Skipped (manual / non-css configs) + +- `packages/plasma-b2c/src/components/Scrollbar/Scrollbar.config.ts` + +**Unresolved variables (not written):** + +- `packages/plasma-b2c/src/components/Skeleton/LineSkeleton.config.ts`: --plasma-typo-body1-line-height, --plasma-typo-body1-font-size, --plasma-typo-body2-line-height, --plasma-typo-body2-font-size, --plasma-typo-body3-line-height, --plasma-typo-body3-font-size, --plasma-typo-button1-line-height, --plasma-typo-button1-font-size, --plasma-typo-button2-line-height, --plasma-typo-button2-font-size, --plasma-typo-caption-line-height, --plasma-typo-caption-font-size, --plasma-typo-display1-line-height, --plasma-typo-display1-font-size, --plasma-typo-display2-line-height, --plasma-typo-display2-font-size, --plasma-typo-display3-line-height, --plasma-typo-display3-font-size, --plasma-typo-footnote1-line-height, --plasma-typo-footnote1-font-size, --plasma-typo-footnote2-line-height, --plasma-typo-footnote2-font-size, --plasma-typo-headline1-line-height, --plasma-typo-headline1-font-size, --plasma-typo-headline2-line-height, --plasma-typo-headline2-font-size, --plasma-typo-headline3-line-height, --plasma-typo-headline3-font-size, --plasma-typo-headline4-line-height, --plasma-typo-headline4-font-size, --plasma-typo-paragraph1-line-height, --plasma-typo-paragraph1-font-size, --plasma-typo-paragraph2-line-height, --plasma-typo-paragraph2-font-size, --plasma-typo-underline-line-height, --plasma-typo-underline-font-size +- `packages/plasma-b2c/src/components/Typography/Old/Body.config.ts`: --plasma-typo-body1-font-family, --plasma-typo-body1-font-size, --plasma-typo-body1-font-style, --plasma-typo-body1-font-weight, --plasma-typo-body1-letter-spacing, --plasma-typo-body1-line-height, --plasma-typo-body2-font-family, --plasma-typo-body2-font-size, --plasma-typo-body2-font-style, --plasma-typo-body2-font-weight, --plasma-typo-body2-letter-spacing, --plasma-typo-body2-line-height, --plasma-typo-body3-font-family, --plasma-typo-body3-font-size, --plasma-typo-body3-font-style, --plasma-typo-body3-font-weight, --plasma-typo-body3-letter-spacing, --plasma-typo-body3-line-height +- `packages/plasma-b2c/src/components/Typography/Old/Button.config.ts`: --plasma-typo-button1-font-family, --plasma-typo-button1-font-size, --plasma-typo-button1-font-style, --plasma-typo-button1-font-weight, --plasma-typo-button1-letter-spacing, --plasma-typo-button1-line-height, --plasma-typo-button2-font-family, --plasma-typo-button2-font-size, --plasma-typo-button2-font-style, --plasma-typo-button2-font-weight, --plasma-typo-button2-letter-spacing, --plasma-typo-button2-line-height +- `packages/plasma-b2c/src/components/Typography/Old/Caption.config.ts`: --plasma-typo-caption-font-family, --plasma-typo-caption-font-size, --plasma-typo-caption-font-style, --plasma-typo-caption-font-weight, --plasma-typo-caption-letter-spacing, --plasma-typo-caption-line-height +- `packages/plasma-b2c/src/components/Typography/Old/Display.config.ts`: --plasma-typo-display1-font-family, --plasma-typo-display1-font-size, --plasma-typo-display1-font-style, --plasma-typo-display1-font-weight, --plasma-typo-display1-letter-spacing, --plasma-typo-display1-line-height, --plasma-typo-display2-font-family, --plasma-typo-display2-font-size, --plasma-typo-display2-font-style, --plasma-typo-display2-font-weight, --plasma-typo-display2-letter-spacing, --plasma-typo-display2-line-height, --plasma-typo-display3-font-family, --plasma-typo-display3-font-size, --plasma-typo-display3-font-style, --plasma-typo-display3-font-weight, --plasma-typo-display3-letter-spacing, --plasma-typo-display3-line-height +- `packages/plasma-b2c/src/components/Typography/Old/Footnote.config.ts`: --plasma-typo-footnote1-font-family, --plasma-typo-footnote1-font-size, --plasma-typo-footnote1-font-style, --plasma-typo-footnote1-font-weight, --plasma-typo-footnote1-letter-spacing, --plasma-typo-footnote1-line-height, --plasma-typo-footnote2-font-family, --plasma-typo-footnote2-font-size, --plasma-typo-footnote2-font-style, --plasma-typo-footnote2-font-weight, --plasma-typo-footnote2-letter-spacing, --plasma-typo-footnote2-line-height +- `packages/plasma-b2c/src/components/Typography/Old/Headline.config.ts`: --plasma-typo-headline1-font-family, --plasma-typo-headline1-font-size, --plasma-typo-headline1-font-style, --plasma-typo-headline1-font-weight, --plasma-typo-headline1-letter-spacing, --plasma-typo-headline1-line-height, --plasma-typo-headline2-font-family, --plasma-typo-headline2-font-size, --plasma-typo-headline2-font-style, --plasma-typo-headline2-font-weight, --plasma-typo-headline2-letter-spacing, --plasma-typo-headline2-line-height, --plasma-typo-headline3-font-family, --plasma-typo-headline3-font-size, --plasma-typo-headline3-font-style, --plasma-typo-headline3-font-weight, --plasma-typo-headline3-letter-spacing, --plasma-typo-headline3-line-height, --plasma-typo-headline4-font-family, --plasma-typo-headline4-font-size, --plasma-typo-headline4-font-style, --plasma-typo-headline4-font-weight, --plasma-typo-headline4-letter-spacing, --plasma-typo-headline4-line-height, --plasma-typo-headline5-font-family, --plasma-typo-headline5-font-size, --plasma-typo-headline5-font-style, --plasma-typo-headline5-font-weight, --plasma-typo-headline5-letter-spacing, --plasma-typo-headline5-line-height +- `packages/plasma-b2c/src/components/Typography/Old/Paragraph.config.ts`: --plasma-typo-paragraph1-font-family, --plasma-typo-paragraph1-font-size, --plasma-typo-paragraph1-font-style, --plasma-typo-paragraph1-font-weight, --plasma-typo-paragraph1-letter-spacing, --plasma-typo-paragraph1-line-height, --plasma-typo-paragraph2-font-family, --plasma-typo-paragraph2-font-size, --plasma-typo-paragraph2-font-style, --plasma-typo-paragraph2-font-weight, --plasma-typo-paragraph2-letter-spacing, --plasma-typo-paragraph2-line-height +- `packages/plasma-b2c/src/components/Typography/Old/ParagraphText.config.ts`: --plasma-typo-paragraph1-font-family, --plasma-typo-paragraph1-font-size, --plasma-typo-paragraph1-font-style, --plasma-typo-paragraph1-font-weight, --plasma-typo-paragraph1-letter-spacing, --plasma-typo-paragraph1-line-height, --plasma-typo-paragraph2-font-family, --plasma-typo-paragraph2-font-size, --plasma-typo-paragraph2-font-style, --plasma-typo-paragraph2-font-weight, --plasma-typo-paragraph2-letter-spacing, --plasma-typo-paragraph2-line-height +- `packages/plasma-b2c/src/components/Typography/Old/Subtitle.config.ts`: --plasma-typo-subtitle-font-family, --plasma-typo-subtitle-font-size, --plasma-typo-subtitle-font-style, --plasma-typo-subtitle-font-weight, --plasma-typo-subtitle-letter-spacing, --plasma-typo-subtitle-line-height +- `packages/plasma-b2c/src/components/Typography/Old/Underline.config.ts`: --plasma-typo-underline-font-family, --plasma-typo-underline-font-size, --plasma-typo-underline-font-style, --plasma-typo-underline-font-weight, --plasma-typo-underline-letter-spacing, --plasma-typo-underline-line-height + +### `plasma-web` + +- **Token module:** `packages/themes/plasma-themes/src/tokens/plasma_web/index.ts` +- **Import:** `@salutejs/plasma-themes/tokens/plasma_web` +- **Config files:** 93 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 81 +- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **Failed (unresolved vars):** 11 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 79 + +Skipped (manual / non-css configs) + +- `packages/plasma-web/src/components/Scrollbar/Scrollbar.config.ts` + +**Unresolved variables (not written):** + +- `packages/plasma-web/src/components/Skeleton/LineSkeleton.config.ts`: --plasma-typo-body1-line-height, --plasma-typo-body1-font-size, --plasma-typo-body2-line-height, --plasma-typo-body2-font-size, --plasma-typo-body3-line-height, --plasma-typo-body3-font-size, --plasma-typo-button1-line-height, --plasma-typo-button1-font-size, --plasma-typo-button2-line-height, --plasma-typo-button2-font-size, --plasma-typo-caption-line-height, --plasma-typo-caption-font-size, --plasma-typo-display1-line-height, --plasma-typo-display1-font-size, --plasma-typo-display2-line-height, --plasma-typo-display2-font-size, --plasma-typo-display3-line-height, --plasma-typo-display3-font-size, --plasma-typo-footnote1-line-height, --plasma-typo-footnote1-font-size, --plasma-typo-footnote2-line-height, --plasma-typo-footnote2-font-size, --plasma-typo-headline1-line-height, --plasma-typo-headline1-font-size, --plasma-typo-headline2-line-height, --plasma-typo-headline2-font-size, --plasma-typo-headline3-line-height, --plasma-typo-headline3-font-size, --plasma-typo-headline4-line-height, --plasma-typo-headline4-font-size, --plasma-typo-paragraph1-line-height, --plasma-typo-paragraph1-font-size, --plasma-typo-paragraph2-line-height, --plasma-typo-paragraph2-font-size, --plasma-typo-underline-line-height, --plasma-typo-underline-font-size +- `packages/plasma-web/src/components/Typography/Old/Body.config.ts`: --plasma-typo-body1-font-family, --plasma-typo-body1-font-size, --plasma-typo-body1-font-style, --plasma-typo-body1-font-weight, --plasma-typo-body1-letter-spacing, --plasma-typo-body1-line-height, --plasma-typo-body2-font-family, --plasma-typo-body2-font-size, --plasma-typo-body2-font-style, --plasma-typo-body2-font-weight, --plasma-typo-body2-letter-spacing, --plasma-typo-body2-line-height, --plasma-typo-body3-font-family, --plasma-typo-body3-font-size, --plasma-typo-body3-font-style, --plasma-typo-body3-font-weight, --plasma-typo-body3-letter-spacing, --plasma-typo-body3-line-height +- `packages/plasma-web/src/components/Typography/Old/Button.config.ts`: --plasma-typo-button1-font-family, --plasma-typo-button1-font-size, --plasma-typo-button1-font-style, --plasma-typo-button1-font-weight, --plasma-typo-button1-letter-spacing, --plasma-typo-button1-line-height, --plasma-typo-button2-font-family, --plasma-typo-button2-font-size, --plasma-typo-button2-font-style, --plasma-typo-button2-font-weight, --plasma-typo-button2-letter-spacing, --plasma-typo-button2-line-height +- `packages/plasma-web/src/components/Typography/Old/Caption.config.ts`: --plasma-typo-caption-font-family, --plasma-typo-caption-font-size, --plasma-typo-caption-font-style, --plasma-typo-caption-font-weight, --plasma-typo-caption-letter-spacing, --plasma-typo-caption-line-height +- `packages/plasma-web/src/components/Typography/Old/Display.config.ts`: --plasma-typo-display1-font-family, --plasma-typo-display1-font-size, --plasma-typo-display1-font-style, --plasma-typo-display1-font-weight, --plasma-typo-display1-letter-spacing, --plasma-typo-display1-line-height, --plasma-typo-display2-font-family, --plasma-typo-display2-font-size, --plasma-typo-display2-font-style, --plasma-typo-display2-font-weight, --plasma-typo-display2-letter-spacing, --plasma-typo-display2-line-height, --plasma-typo-display3-font-family, --plasma-typo-display3-font-size, --plasma-typo-display3-font-style, --plasma-typo-display3-font-weight, --plasma-typo-display3-letter-spacing, --plasma-typo-display3-line-height +- `packages/plasma-web/src/components/Typography/Old/Footnote.config.ts`: --plasma-typo-footnote1-font-family, --plasma-typo-footnote1-font-size, --plasma-typo-footnote1-font-style, --plasma-typo-footnote1-font-weight, --plasma-typo-footnote1-letter-spacing, --plasma-typo-footnote1-line-height, --plasma-typo-footnote2-font-family, --plasma-typo-footnote2-font-size, --plasma-typo-footnote2-font-style, --plasma-typo-footnote2-font-weight, --plasma-typo-footnote2-letter-spacing, --plasma-typo-footnote2-line-height +- `packages/plasma-web/src/components/Typography/Old/Headline.config.ts`: --plasma-typo-headline1-font-family, --plasma-typo-headline1-font-size, --plasma-typo-headline1-font-style, --plasma-typo-headline1-font-weight, --plasma-typo-headline1-letter-spacing, --plasma-typo-headline1-line-height, --plasma-typo-headline2-font-family, --plasma-typo-headline2-font-size, --plasma-typo-headline2-font-style, --plasma-typo-headline2-font-weight, --plasma-typo-headline2-letter-spacing, --plasma-typo-headline2-line-height, --plasma-typo-headline3-font-family, --plasma-typo-headline3-font-size, --plasma-typo-headline3-font-style, --plasma-typo-headline3-font-weight, --plasma-typo-headline3-letter-spacing, --plasma-typo-headline3-line-height, --plasma-typo-headline4-font-family, --plasma-typo-headline4-font-size, --plasma-typo-headline4-font-style, --plasma-typo-headline4-font-weight, --plasma-typo-headline4-letter-spacing, --plasma-typo-headline4-line-height, --plasma-typo-headline5-font-family, --plasma-typo-headline5-font-size, --plasma-typo-headline5-font-style, --plasma-typo-headline5-font-weight, --plasma-typo-headline5-letter-spacing, --plasma-typo-headline5-line-height +- `packages/plasma-web/src/components/Typography/Old/Paragraph.config.ts`: --plasma-typo-paragraph1-font-family, --plasma-typo-paragraph1-font-size, --plasma-typo-paragraph1-font-style, --plasma-typo-paragraph1-font-weight, --plasma-typo-paragraph1-letter-spacing, --plasma-typo-paragraph1-line-height, --plasma-typo-paragraph2-font-family, --plasma-typo-paragraph2-font-size, --plasma-typo-paragraph2-font-style, --plasma-typo-paragraph2-font-weight, --plasma-typo-paragraph2-letter-spacing, --plasma-typo-paragraph2-line-height +- `packages/plasma-web/src/components/Typography/Old/ParagraphText.config.ts`: --plasma-typo-paragraph1-font-family, --plasma-typo-paragraph1-font-size, --plasma-typo-paragraph1-font-style, --plasma-typo-paragraph1-font-weight, --plasma-typo-paragraph1-letter-spacing, --plasma-typo-paragraph1-line-height, --plasma-typo-paragraph2-font-family, --plasma-typo-paragraph2-font-size, --plasma-typo-paragraph2-font-style, --plasma-typo-paragraph2-font-weight, --plasma-typo-paragraph2-letter-spacing, --plasma-typo-paragraph2-line-height +- `packages/plasma-web/src/components/Typography/Old/Subtitle.config.ts`: --plasma-typo-subtitle-font-family, --plasma-typo-subtitle-font-size, --plasma-typo-subtitle-font-style, --plasma-typo-subtitle-font-weight, --plasma-typo-subtitle-letter-spacing, --plasma-typo-subtitle-line-height +- `packages/plasma-web/src/components/Typography/Old/Underline.config.ts`: --plasma-typo-underline-font-family, --plasma-typo-underline-font-size, --plasma-typo-underline-font-style, --plasma-typo-underline-font-weight, --plasma-typo-underline-letter-spacing, --plasma-typo-underline-line-height + +### `plasma-new-hope` + +- **Token module:** `packages/themes/plasma-themes/src/tokens/plasma_b2c/index.ts` +- **Import:** `@salutejs/plasma-themes/tokens/plasma_b2c` +- **Config root:** `packages/plasma-new-hope/src/examples/components` +- **Config files:** 103 +- **Written this run:** 1 +- **No `var(--*)` (unchanged / already migrated):** 97 +- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **Failed (unresolved vars):** 4 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 95 + +Skipped (manual / non-css configs) + +- `packages/plasma-new-hope/src/examples/components/Scrollbar/Scrollbar.config.ts` + +**Unresolved variables (not written):** + +- `packages/plasma-new-hope/src/examples/components/Dropzone/Dropzone.config.ts`: --outline-secondary +- `packages/plasma-new-hope/src/examples/components/Radiobox/Radiobox.outline.config.ts`: --text-default +- `packages/plasma-new-hope/src/examples/components/Select/Select.config.ts`: --plasma-input-label-color, --plasma-input-placeholder-color +- `packages/plasma-new-hope/src/examples/components/Switch/Switch.outline.config.ts`: --outline-secondary + +### `sdds-bizcom` + +- **Token module:** `packages/themes/sdds-themes/src/tokens/sdds_bizcom/index.ts` +- **Import:** `@salutejs/sdds-themes/tokens/sdds_bizcom` +- **Config files:** 78 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 78 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 +- **Failed (unresolved vars):** 0 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 75 + +### `sdds-crm` + +- **Token module:** `packages/themes/sdds-themes/src/tokens/sdds_serv/index.ts` +- **Import:** `@salutejs/sdds-themes/tokens/sdds_serv` +- **Config files:** 77 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 76 +- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **Failed (unresolved vars):** 0 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 73 + +Skipped (manual / non-css configs) + +- `packages/sdds-crm/src/components/Scrollbar/Scrollbar.config.ts` + +### `sdds-cs` + +- **Token module:** `packages/themes/sdds-themes/src/tokens/sdds_cs/index.ts` +- **Import:** `@salutejs/sdds-themes/tokens/sdds_cs` +- **Config files:** 61 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 43 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 +- **Failed (unresolved vars):** 18 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 40 + +**Unresolved variables (not written):** + +- `packages/sdds-cs/src/components/Autocomplete/Autocomplete.config.ts`: --plasma-colors-transparent, --plasma-input-label-color, --plasma-input-placeholder-color, --plasma-colors-secondary +- `packages/sdds-cs/src/components/Calendar/Calendar.config.ts`: --surface-primary +- `packages/sdds-cs/src/components/Calendar/CalendarDouble.config.ts`: --surface-primary +- `packages/sdds-cs/src/components/Combobox/Combobox.config.ts`: --surface-transparent-secondary, --surface-transparent-secondary-hover, --surface-transparent-secondary-active, --plasma-input-label-color, --plasma-input-placeholder-color, --plasma-colors-secondary +- `packages/sdds-cs/src/components/DatePicker/DatePicker.config.ts`: --surface-transparent-secondary +- `packages/sdds-cs/src/components/Drawer/Drawer.config.ts`: --surface-transparent-primary, --overlay-blur, --overlay-soft +- `packages/sdds-cs/src/components/Dropdown/Dropdown.config.ts`: --surface-transparent-tertiary +- `packages/sdds-cs/src/components/Modal/Modal.config.ts`: --overlay-soft +- `packages/sdds-cs/src/components/Select/Select.config.ts`: --plasma-input-label-color, --plasma-input-placeholder-color, --plasma-colors-secondary +- `packages/sdds-cs/src/components/Skeleton/LineSkeleton.config.ts`: --surface-transparent-secondary, --surface-transparent-tertiary +- `packages/sdds-cs/src/components/Spinner/Spinner.config.ts`: --text-paragraph +- `packages/sdds-cs/src/components/Table/Table.config.ts`: --surface-transparent-tertiary +- `packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabItem.config.ts`: --surface-transparent-card +- `packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabs.config.ts`: --surface-transparent-primary +- `packages/sdds-cs/src/components/TextArea/TextArea.clear.config.ts`: --outline-negative-focus, --surface-transparent-primary +- `packages/sdds-cs/src/components/TextArea/TextArea.config.ts`: --outline-negative-focus, --surface-transparent-primary +- `packages/sdds-cs/src/components/TextField/TextField.config.ts`: --surface-transparent-secondary, --surface-transparent-secondary-hover, --surface-transparent-secondary-active +- `packages/sdds-cs/src/components/TimePicker/TimePicker.config.ts`: --surface-transparent-primary + +### `sdds-dfa` + +- **Token module:** `packages/themes/sdds-themes/src/tokens/sdds_dfa/index.ts` +- **Import:** `@salutejs/sdds-themes/tokens/sdds_dfa` +- **Config files:** 76 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 76 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 +- **Failed (unresolved vars):** 0 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 73 + +### `sdds-finai` + +- **Token module:** `packages/themes/sdds-themes/src/tokens/sdds_finai/index.ts` +- **Import:** `@salutejs/sdds-themes/tokens/sdds_finai` +- **Config files:** 74 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 73 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 +- **Failed (unresolved vars):** 1 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 70 + +**Unresolved variables (not written):** + +- `packages/sdds-finai/src/components/Progress/Progress.config.ts`: --surface-accent-gradient + +### `sdds-insol` + +- **Token module:** `packages/themes/sdds-themes/src/tokens/sdds_insol/index.ts` +- **Import:** `@salutejs/sdds-themes/tokens/sdds_insol` +- **Config files:** 76 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 74 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 +- **Failed (unresolved vars):** 2 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 70 + +**Unresolved variables (not written):** + +- `packages/sdds-insol/src/components/Autocomplete/Autocomplete.config.ts`: --plasma-colors-transparent +- `packages/sdds-insol/src/components/Combobox/Combobox.config.ts`: --plasma-input-label-color, --plasma-input-placeholder-color, --plasma-colors-secondary + +### `sdds-netology` + +- **Token module:** `packages/themes/plasma-themes/src/tokens/plasma_b2c/index.ts` +- **Import:** `@salutejs/plasma-themes/tokens/plasma_b2c` +- **Config files:** 79 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 78 +- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **Failed (unresolved vars):** 0 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 75 + +Skipped (manual / non-css configs) + +- `packages/sdds-netology/src/components/Scrollbar/Scrollbar.config.ts` + +### `sdds-os` + +- **Token module:** `packages/themes/sdds-themes/src/tokens/sdds_os/index.ts` +- **Import:** `@salutejs/sdds-themes/tokens/sdds_os` +- **Config files:** 55 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 54 +- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **Failed (unresolved vars):** 0 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 52 + +Skipped (manual / non-css configs) + +- `packages/sdds-os/src/components/Scrollbar/Scrollbar.config.ts` + +### `sdds-platform-ai` + +- **Token module:** `packages/themes/sdds-themes/src/tokens/sdds_platform_ai/index.ts` +- **Import:** `@salutejs/sdds-themes/tokens/sdds_platform_ai` +- **Config files:** 64 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 63 +- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **Failed (unresolved vars):** 0 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 62 + +Skipped (manual / non-css configs) + +- `packages/sdds-platform-ai/src/components/Scrollbar/Scrollbar.config.ts` + +### `sdds-sbcom` + +- **Token module:** `packages/themes/sdds-themes/src/tokens/sdds_sbcom/index.ts` +- **Import:** `@salutejs/sdds-themes/tokens/sdds_sbcom` +- **Config files:** 78 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 77 +- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **Failed (unresolved vars):** 0 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 73 + +Skipped (manual / non-css configs) + +- `packages/sdds-sbcom/src/components/Scrollbar/Scrollbar.config.ts` + +### `sdds-scan` + +- **Token module:** `packages/themes/sdds-themes/src/tokens/sdds_scan/index.ts` +- **Import:** `@salutejs/sdds-themes/tokens/sdds_scan` +- **Config files:** 72 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 71 +- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **Failed (unresolved vars):** 0 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 68 + +Skipped (manual / non-css configs) + +- `packages/sdds-scan/src/components/Scrollbar/Scrollbar.config.ts` + +### `sdds-serv` + +- **Token module:** `packages/themes/sdds-themes/src/tokens/sdds_serv/index.ts` +- **Import:** `@salutejs/sdds-themes/tokens/sdds_serv` +- **Config files:** 79 +- **Written this run:** 0 +- **No `var(--*)` (unchanged / already migrated):** 78 +- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **Failed (unresolved vars):** 0 +- **Failed (triple-dash, if any before fix pass):** 0 +- **Errors:** 0 +- **Configs importing theme:** 75 + +Skipped (manual / non-css configs) + +- `packages/sdds-serv/src/components/Scrollbar/Scrollbar.config.ts` + +## Follow-up + +- For **Scrollbar**-style configs (plain object + string colors, no styled-components css template), add theme imports manually (see `packages/plasma-giga/.../Scrollbar.config.ts`). +- Run **ESLint with `--fix`** on touched packages if `import/order` or Prettier complain. +- Re-run a single package: `node scripts/migrate-plasma-giga-config-tokens.mjs ` (profiles: `plasma-giga`, `sdds-sbcom`, …). + +## Unresolved variables (why migration can fail) + +- **Legacy plasma-web “Old” typography** (`--plasma-typo-body1-*`, `display1`, `headline1`, …): these names are **not** present as string exports in `plasma_web/index.ts` (the theme uses the newer `--plasma-typo-body-m-*` / `dspl-*` scale). Migrate those configs manually or point them at the correct token exports. +- **Theme-specific gaps**: some packages reference CSS variables (e.g. `--surface-primary`, `--plasma-input-*`, `--overlay-soft`) that **do not appear** in the matching `tokens/*/index.ts` file. Add tokens upstream, or replace with the closest exported token after design review. +- `**--plasma-typo-*-bold-bold-*`\*\*: duplicated `bold` segment in the variable name; the migrator normalizes `-bold-bold-` → `-bold-` when resolving typography. diff --git a/scripts/migrate-plasma-giga-config-tokens.mjs b/scripts/migrate-plasma-giga-config-tokens.mjs new file mode 100644 index 00000000000..95b073ad3fa --- /dev/null +++ b/scripts/migrate-plasma-giga-config-tokens.mjs @@ -0,0 +1,806 @@ +/** + * Replaces var(--*) in component configs with theme token references (styled-components `css` blocks). + * + * Run from repo root: + * node scripts/migrate-plasma-giga-config-tokens.mjs [profile] + * node scripts/migrate-plasma-giga-config-tokens.mjs --all + * + * Profiles: plasma-giga, plasma-homeds, plasma-b2c, plasma-web, plasma-new-hope, sdds-sbcom, sdds-bizcom, sdds-crm, sdds-cs, + * sdds-dfa, sdds-finai, sdds-insol, sdds-netology, sdds-os, sdds-platform-ai, sdds-scan, sdds-serv + * `--all` runs `BATCH_PROFILE_KEYS` (see TOKEN_MIGRATION_REPORT.md for PR links). + * Special cases: sdds-crm → `sdds_serv` tokens; sdds-netology → `plasma_b2c`; plasma-new-hope → configs under `src/examples/components` + `plasma_b2c` tokens (see report). + * + * With --all: fixes var(--- typos in target packages, migrates each profile, writes TOKEN_MIGRATION_REPORT.md. + * + * Constraints: + * - Only safe for files that use styled-components `css` template literals. + * - `Scrollbar/Scrollbar.config.ts`: plain object + quoted `var(--*)` values → theme token identifiers (see plasma-giga PR #2637). + * - Idempotent when no var(--*) remains. + */ +import * as fs from 'node:fs'; +import * as path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const root = path.join(__dirname, '..'); + +const plasma = (segment) => path.join(root, 'packages/themes/plasma-themes/src/tokens', segment, 'index.ts'); +const sdds = (segment) => path.join(root, 'packages/themes/sdds-themes/src/tokens', segment, 'index.ts'); + +/** @type {Record} */ +const PROFILES = { + 'plasma-giga': { + pkgRoot: path.join(root, 'packages/plasma-giga'), + tokensMod: plasma('plasma_giga'), + importPath: '@salutejs/plasma-themes/tokens/plasma_giga', + }, + 'plasma-homeds': { + pkgRoot: path.join(root, 'packages/plasma-homeds'), + tokensMod: plasma('plasma_homeds'), + importPath: '@salutejs/plasma-themes/tokens/plasma_homeds', + }, + 'plasma-b2c': { + pkgRoot: path.join(root, 'packages/plasma-b2c'), + tokensMod: plasma('plasma_b2c'), + importPath: '@salutejs/plasma-themes/tokens/plasma_b2c', + }, + 'plasma-web': { + pkgRoot: path.join(root, 'packages/plasma-web'), + tokensMod: plasma('plasma_web'), + importPath: '@salutejs/plasma-themes/tokens/plasma_web', + }, + 'plasma-new-hope': { + pkgRoot: path.join(root, 'packages/plasma-new-hope'), + tokensMod: plasma('plasma_b2c'), + importPath: '@salutejs/plasma-themes/tokens/plasma_b2c', + componentsRelative: 'src/examples/components', + tokenThemeNote: + 'Example / Storybook configs under `src/examples/components` (not `src/components`); same token bundle as plasma_b2c.', + }, + 'sdds-sbcom': { + pkgRoot: path.join(root, 'packages/sdds-sbcom'), + tokensMod: sdds('sdds_sbcom'), + importPath: '@salutejs/sdds-themes/tokens/sdds_sbcom', + }, + 'sdds-bizcom': { + pkgRoot: path.join(root, 'packages/sdds-bizcom'), + tokensMod: sdds('sdds_bizcom'), + importPath: '@salutejs/sdds-themes/tokens/sdds_bizcom', + }, + 'sdds-crm': { + pkgRoot: path.join(root, 'packages/sdds-crm'), + tokensMod: sdds('sdds_serv'), + importPath: '@salutejs/sdds-themes/tokens/sdds_serv', + tokenThemeNote: 'No sdds_crm token set in repo; package uses sdds_serv (see ViewContainer / tokens re-export).', + }, + 'sdds-cs': { + pkgRoot: path.join(root, 'packages/sdds-cs'), + tokensMod: sdds('sdds_cs'), + importPath: '@salutejs/sdds-themes/tokens/sdds_cs', + }, + 'sdds-dfa': { + pkgRoot: path.join(root, 'packages/sdds-dfa'), + tokensMod: sdds('sdds_dfa'), + importPath: '@salutejs/sdds-themes/tokens/sdds_dfa', + }, + 'sdds-finai': { + pkgRoot: path.join(root, 'packages/sdds-finai'), + tokensMod: sdds('sdds_finai'), + importPath: '@salutejs/sdds-themes/tokens/sdds_finai', + }, + 'sdds-insol': { + pkgRoot: path.join(root, 'packages/sdds-insol'), + tokensMod: sdds('sdds_insol'), + importPath: '@salutejs/sdds-themes/tokens/sdds_insol', + }, + 'sdds-netology': { + pkgRoot: path.join(root, 'packages/sdds-netology'), + tokensMod: plasma('plasma_b2c'), + importPath: '@salutejs/plasma-themes/tokens/plasma_b2c', + tokenThemeNote: 'Package depends on @salutejs/plasma-themes; re-exports plasma_b2c (not sdds-themes).', + }, + 'sdds-os': { + pkgRoot: path.join(root, 'packages/sdds-os'), + tokensMod: sdds('sdds_os'), + importPath: '@salutejs/sdds-themes/tokens/sdds_os', + }, + 'sdds-platform-ai': { + pkgRoot: path.join(root, 'packages/sdds-platform-ai'), + tokensMod: sdds('sdds_platform_ai'), + importPath: '@salutejs/sdds-themes/tokens/sdds_platform_ai', + }, + 'sdds-scan': { + pkgRoot: path.join(root, 'packages/sdds-scan'), + tokensMod: sdds('sdds_scan'), + importPath: '@salutejs/sdds-themes/tokens/sdds_scan', + }, + 'sdds-serv': { + pkgRoot: path.join(root, 'packages/sdds-serv'), + tokensMod: sdds('sdds_serv'), + importPath: '@salutejs/sdds-themes/tokens/sdds_serv', + }, +}; + +function componentsDirFor(profile) { + const sub = profile.componentsRelative ?? 'src/components'; + return path.join(profile.pkgRoot, sub); +} + +/** GitHub PRs per package (empty string = add link when opened). See TOKEN_MIGRATION_REPORT.md. */ +const MIGRATION_PR_LINKS = { + 'plasma-giga': 'https://github.com/salute-developers/plasma/pull/2637', + 'plasma-homeds': 'https://github.com/salute-developers/plasma/pull/2649', + 'plasma-b2c': 'https://github.com/salute-developers/plasma/pull/2651', + 'plasma-web': 'https://github.com/salute-developers/plasma/pull/2650', + 'plasma-new-hope': 'https://github.com/salute-developers/plasma/pull/2652', + 'sdds-bizcom': 'https://github.com/salute-developers/plasma/pull/2648', + 'sdds-crm': 'https://github.com/salute-developers/plasma/pull/2647', + 'sdds-cs': 'https://github.com/salute-developers/plasma/pull/2646', + 'sdds-dfa': 'https://github.com/salute-developers/plasma/pull/2645', + 'sdds-finai': 'https://github.com/salute-developers/plasma/pull/2644', + 'sdds-insol': 'https://github.com/salute-developers/plasma/pull/2643', + 'sdds-netology': 'https://github.com/salute-developers/plasma/pull/2642', + 'sdds-os': 'https://github.com/salute-developers/plasma/pull/2641', + 'sdds-platform-ai': 'https://github.com/salute-developers/plasma/pull/2640', + 'sdds-sbcom': 'https://github.com/salute-developers/plasma/pull/2639', + 'sdds-scan': 'https://github.com/salute-developers/plasma/pull/2653', + 'sdds-serv': 'https://github.com/salute-developers/plasma/pull/2654', +}; + +const BATCH_PROFILE_KEYS = [ + 'plasma-giga', + 'plasma-homeds', + 'plasma-b2c', + 'plasma-web', + 'plasma-new-hope', + 'sdds-bizcom', + 'sdds-crm', + 'sdds-cs', + 'sdds-dfa', + 'sdds-finai', + 'sdds-insol', + 'sdds-netology', + 'sdds-os', + 'sdds-platform-ai', + 'sdds-sbcom', + 'sdds-scan', + 'sdds-serv', +]; + +const typoPrefixes = [ + ['body-xxs', 'bodyXXS', 'bodyXXSBold', 'bodyXXSMedium'], + ['body-xs', 'bodyXS', 'bodyXSBold', 'bodyXSMedium'], + ['body-l', 'bodyL', 'bodyLBold', 'bodyLMedium'], + ['body-m', 'bodyM', 'bodyMBold', 'bodyMMedium'], + ['body-s', 'bodyS', 'bodySBold', 'bodySMedium'], + ['dspl-l', 'dsplL', 'dsplLBold', 'dsplLMedium'], + ['dspl-m', 'dsplM', 'dsplMBold', 'dsplMMedium'], + ['dspl-s', 'dsplS', 'dsplSBold', 'dsplSMedium'], + ['text-l', 'textL', 'textLBold', 'textLMedium'], + ['text-m', 'textM', 'textMBold', 'textMMedium'], + ['text-s', 'textS', 'textSBold', 'textSMedium'], + ['text-xs', 'textXS', 'textXSBold', 'textXSMedium'], + ['text-slim', 'textSlim', 'textSlimBold', 'textSlimMedium'], + ['h1', 'h1', 'h1Bold', 'h1Medium'], + ['h2', 'h2', 'h2Bold', 'h2Medium'], + ['h3', 'h3', 'h3Bold', 'h3Medium'], + ['h4', 'h4', 'h4Bold', 'h4Medium'], + ['h5', 'h5', 'h5Bold', 'h5Medium'], + ['h6', 'h6', 'h6Bold', 'h6Medium'], +]; + +function typoSuffixToExpr(suffix, base, bold, medium) { + if (suffix === 'font-family') return `${base}.fontFamily`; + if (suffix === 'font-size') return `${base}.fontSize`; + if (suffix === 'font-style') return `${base}.fontStyle`; + if (suffix === 'font-weight' || suffix === 'body-font-weight') return `${base}.fontWeight`; + if (suffix === 'letter-spacing') return `${base}.letterSpacing`; + if (suffix === 'line-height') return `${base}.lineHeight`; + if (suffix === 'bold-font-weight' || suffix === 'bold-weight') return `${bold}.fontWeight`; + if (suffix === 'medium-font-weight') return `${medium}.fontWeight`; + if (suffix.startsWith('bold-')) { + const sub = suffix.slice('bold-'.length); + return typoSuffixToExpr(sub, bold, bold, bold); + } + if (suffix.startsWith('medium-')) { + const sub = suffix.slice('medium-'.length); + return typoSuffixToExpr(sub, medium, medium, medium); + } + return null; +} + +function typoReplacement(cssVar) { + if (!cssVar.startsWith('--plasma-typo-')) return null; + let rest = cssVar.slice('--plasma-typo-'.length); + rest = rest.replace(/-bold-bold-/, '-bold-'); + for (const [prefix, base, bold, medium] of typoPrefixes) { + if (rest === prefix || rest.startsWith(`${prefix}-`)) { + const suffix = rest === prefix ? '' : rest.slice(prefix.length + 1); + return typoSuffixToExpr(suffix, base, bold, medium); + } + } + return null; +} + +function buildStringVarMap(tokensMod) { + const src = fs.readFileSync(tokensMod, 'utf8'); + /** @type {Map} */ + const map = new Map(); + const re = /export const (\w+) =[\s\n]*'var\((--[^,)]+)/g; + let m; + while ((m = re.exec(src)) !== null) { + const [, exportName, varName] = m; + if (!map.has(varName)) map.set(varName, exportName); + } + return map; +} + +/** CSS vars used in configs but named differently (or missing) in token index */ +const manualStringVarMap = new Map([ + ['--surface-transparent-clear', 'surfaceClear'], + ['--plasma-colors-skeleton-gradient', 'surfaceSkeletonGradient'], + ['--plasma-colors-skeleton-gradient-lighter', 'surfaceSkeletonDeepGradient'], +]); + +function buildAllowedTokenImports(stringVarMap) { + const s = new Set(stringVarMap.values()); + for (const v of manualStringVarMap.values()) { + s.add(v); + } + for (const row of typoPrefixes) { + for (let i = 1; i < row.length; i++) { + s.add(row[i]); + } + } + return s; +} + +function tokenImportsNeeded(content, allowedTokenImports) { + const need = new Set(); + const re = /\$\{([a-zA-Z]\w*(?:\.[a-zA-Z]\w*)*)\}/g; + let m; + while ((m = re.exec(content)) !== null) { + const rootName = m[1].split('.')[0]; + if (allowedTokenImports.has(rootName)) need.add(rootName); + } + return [...need].sort((a, b) => a.localeCompare(b)); +} + +/** `packages/.../Scrollbar/Scrollbar.config.ts` — plain object colors, no styled-components `css`. */ +function isScrollbarConfigPath(filePath) { + const norm = filePath.split(path.sep).join('/'); + return /\/Scrollbar\/Scrollbar\.config\.ts$/.test(norm); +} + +/** + * Replace `'var(--foo)'` / `"var(--foo)"` (optional `, fallback`) with bare token identifiers. + * @returns {{ next: string; usedRoots: Set }} + */ +function applyScrollbarStyleReplacements(content, stringVarMap) { + const usedRoots = new Set(); + let next = content; + + function replaceQuoted(quote) { + const q = quote === "'" ? "'" : '"'; + const re = new RegExp(`${q}var\\((--[a-z0-9-]+)(?:,[^)]*)?\\)${q}`, 'g'); + next = next.replace(re, (full, varName) => { + const rep = replacementForVar(varName, stringVarMap); + if (!rep || rep.expr.includes('.')) return full; + usedRoots.add(rep.expr); + return rep.expr; + }); + } + replaceQuoted("'"); + replaceQuoted('"'); + + const vars = [...collectVars(next)].sort((a, b) => b.length - a.length); + for (const v of vars) { + const rep = replacementForVar(v, stringVarMap); + if (!rep || rep.expr.includes('.')) continue; + if (next.includes(`var(${v})`)) { + next = next.split(`var(${v})`).join(rep.expr); + usedRoots.add(rep.expr); + } + if (next.includes(`var(${v},`)) { + next = next.split(`var(${v},`).join(`${rep.expr},`); + usedRoots.add(rep.expr); + } + } + + return { next, usedRoots }; +} + +function mergeTokenImportsIntoFile(next, importPath, sortedNames) { + const importRe = new RegExp( + `import\\s*\\{([^}]+)\\}\\s*from\\s*['"]${importPath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}['"]`, + 's', + ); + let mergedTokenImport = false; + next = next.replace(importRe, (_, inner) => { + mergedTokenImport = true; + const existing = inner + .split(',') + .map((s) => s.trim()) + .filter(Boolean); + const merged = [...new Set([...existing, ...sortedNames])].sort((a, b) => a.localeCompare(b)); + return `import {\n ${merged.join(',\n ')},\n} from '${importPath}'`; + }); + if (!mergedTokenImport && sortedNames.length) { + const firstImport = next.indexOf('import '); + const block = `import {\n ${sortedNames.join(',\n ')},\n} from '${importPath}';\n`; + if (firstImport === -1) next = block + next; + else next = next.slice(0, firstImport) + block + next.slice(firstImport); + } + return next; +} + +function collectVars(content) { + const found = new Set(); + const re = /var\((--[a-z0-9-]+)(?:\)|,)/g; + let m; + while ((m = re.exec(content)) !== null) { + found.add(m[1]); + } + return found; +} + +/** Invalid `var(---foo)` / `var(----foo)` typos (extra `-` after `var(`). */ +function collectTripleDashVars(content) { + const found = []; + const re = /var\((-{3,}[a-z0-9-]+)\)/g; + let m; + while ((m = re.exec(content)) !== null) { + found.push(m[1]); + } + return found; +} + +function replacementForVar(cssVar, stringVarMap) { + const typo = typoReplacement(cssVar); + if (typo) return { expr: typo, kind: 'typo' }; + const manual = manualStringVarMap.get(cssVar); + if (manual) return { expr: manual, kind: 'string' }; + const ex = stringVarMap.get(cssVar); + if (ex) return { expr: ex, kind: 'string' }; + return null; +} + +function applyVarReplacements(content, stringVarMap) { + let next = content; + + const specials = [ + [ + /var\(\s*--plasma-colors-skeleton-gradient\s*,\s*var\(\s*--surface-skeleton-gradient\s*\)\s*\)/g, + '${surfaceSkeletonGradient}', + ], + [ + /var\(\s*--plasma-colors-skeleton-gradient-lighter\s*,\s*var\(\s*--surface-skeleton-deep-gradient\s*\)\s*\)/g, + '${surfaceSkeletonDeepGradient}', + ], + ]; + for (const [re, repl] of specials) { + next = next.replace(re, repl); + } + + const vars = [...collectVars(next)].sort((a, b) => b.length - a.length); + for (const v of vars) { + const rep = replacementForVar(v, stringVarMap); + if (!rep) continue; + const lit = '${' + rep.expr + '}'; + next = next.split(`var(${v})`).join(lit); + next = next.split(`var(${v},`).join(lit + ','); + } + return next; +} + +/** + * @param {string} filePath + * @param {{ importPath: string; stringVarMap: Map; allowedTokenImports: Set }} ctx + * @returns {{ status: string; rel?: string; unresolved?: string[]; tripleDash?: string[] }} + */ +function migrateFile(filePath, ctx) { + const rel = path.relative(root, filePath); + const { importPath, stringVarMap, allowedTokenImports } = ctx; + let content = fs.readFileSync(filePath, 'utf8'); + + const tripleDash = collectTripleDashVars(content); + if (tripleDash.length) { + return { status: 'fail_triple_dash', rel, tripleDash }; + } + + if (!content.includes('var(--')) { + return { status: 'no_var', rel }; + } + + if (!content.includes('css`')) { + if (!isScrollbarConfigPath(filePath)) { + return { status: 'skip_no_css', rel }; + } + const sb = applyScrollbarStyleReplacements(content, stringVarMap); + let next = sb.next; + const unresolved = [...collectVars(next)]; + if (unresolved.length) { + return { status: 'fail_unresolved', rel, unresolved }; + } + const fromCss = tokenImportsNeeded(next, allowedTokenImports); + const sorted = [...new Set([...sb.usedRoots, ...fromCss])].sort((a, b) => a.localeCompare(b)); + next = mergeTokenImportsIntoFile(next, importPath, sorted); + fs.writeFileSync(filePath, next); + return { status: 'migrated', rel }; + } + + let next = content; + for (let i = 0; i < 12 && next.includes('var(--'); i++) { + next = applyVarReplacements(next, stringVarMap); + } + + const unresolved = [...collectVars(next)]; + if (unresolved.length) { + return { status: 'fail_unresolved', rel, unresolved }; + } + + const sorted = tokenImportsNeeded(next, allowedTokenImports); + next = mergeTokenImportsIntoFile(next, importPath, sorted); + + fs.writeFileSync(filePath, next); + return { status: 'migrated', rel }; +} + +function walk(dir) { + const out = []; + if (!fs.existsSync(dir)) return out; + for (const name of fs.readdirSync(dir)) { + const p = path.join(dir, name); + const st = fs.statSync(p); + if (st.isDirectory()) out.push(...walk(p)); + else if (name.endsWith('.config.ts')) out.push(p); + } + return out; +} + +/** + * Replace `var(---x)` → `var(--x)` (and more dashes) in .config.ts under dir. + * @returns {{ file: string; replacements: number }[]} + */ +function fixTripleDashInConfigs(dir) { + const files = walk(dir); + /** @type {{ file: string; replacements: number }[]} */ + const log = []; + for (const f of files) { + let s = fs.readFileSync(f, 'utf8'); + const before = s; + s = s.replace(/var\((-{3,})([a-z0-9-]+)\)/g, (match, dashes, name) => { + return `var(--${name})`; + }); + if (s !== before) { + const n = [...before.matchAll(/var\((-{3,}[a-z0-9-]+)\)/g)].length; + fs.writeFileSync(f, s); + log.push({ file: path.relative(root, f), replacements: n }); + } + } + return log; +} + +/** + * @param {string} profileKey + * @param {{ quiet?: boolean }} [opts] + */ +function runProfile(profileKey, opts = {}) { + const quiet = opts.quiet ?? false; + const profile = PROFILES[profileKey]; + if (!profile) { + console.error( + `Unknown profile "${profileKey}". Use: ${Object.keys(PROFILES).sort().join(', ')}`, + ); + process.exit(1); + } + if (!fs.existsSync(profile.tokensMod)) { + console.error(`Token file not found: ${profile.tokensMod}`); + process.exit(1); + } + + const stringVarMap = buildStringVarMap(profile.tokensMod); + const allowedTokenImports = buildAllowedTokenImports(stringVarMap); + const componentsDir = componentsDirFor(profile); + const ctx = { + importPath: profile.importPath, + stringVarMap, + allowedTokenImports, + }; + + const files = walk(componentsDir); + /** @type {typeof files} */ + const migrated = []; + /** @type {typeof files} */ + const noVar = []; + /** @type {typeof files} */ + const skipNoCss = []; + /** @type {{ rel: string; unresolved: string[] }[]} */ + const failUnresolved = []; + /** @type {{ rel: string; tripleDash: string[] }[]} */ + const failTripleDash = []; + /** @type {any[]} */ + const errors = []; + + for (const f of files) { + try { + const r = migrateFile(f, ctx); + if (!quiet && r.status === 'migrated') console.log('migrated', r.rel); + if (!quiet && r.status === 'skip_no_css') { + console.warn(`Skip ${r.rel}: var(--*) outside styled-components css template — edit manually`); + } + if (!quiet && r.status === 'fail_unresolved') { + console.warn(`Unresolved in ${r.rel}: ${r.unresolved.join(', ')}`); + } + if (!quiet && r.status === 'fail_triple_dash') { + console.warn(`Triple-dash typo in ${r.rel}: ${r.tripleDash.join(', ')} — fix var(---…) → var(--…)`); + } + if (r.status === 'migrated') migrated.push(f); + else if (r.status === 'no_var') noVar.push(f); + else if (r.status === 'skip_no_css') skipNoCss.push(f); + else if (r.status === 'fail_unresolved') failUnresolved.push({ rel: r.rel, unresolved: r.unresolved }); + else if (r.status === 'fail_triple_dash') failTripleDash.push({ rel: r.rel, tripleDash: r.tripleDash }); + } catch (e) { + errors.push({ file: path.relative(root, f), error: String(e) }); + console.error(f, e); + } + } + + if (!quiet) console.log('done, profile:', profileKey, 'files written:', migrated.length); + + return { + profileKey, + profile, + totalConfigFiles: files.length, + migrated: migrated.map((f) => path.relative(root, f)), + noVarTokens: noVar.map((f) => path.relative(root, f)), + skippedNoCss: skipNoCss.map((f) => path.relative(root, f)), + failedUnresolved: failUnresolved, + failedTripleDash: failTripleDash, + errors, + }; +} + +function countConfigFilesWithTokenImport(pkgRoot, importPath, componentsRelative = 'src/components') { + const dir = path.join(pkgRoot, componentsRelative); + let n = 0; + for (const f of walk(dir)) { + const t = fs.readFileSync(f, 'utf8'); + if (t.includes(`from '${importPath}'`) || t.includes(`from "${importPath}"`)) n++; + } + return n; +} + +function scanTripleDashInProfiles(profileKeys) { + /** @type {string[]} */ + const linesOut = []; + const re = /var\((-{3,}[a-z0-9-]+)\)/g; + for (const key of profileKeys) { + const dir = componentsDirFor(PROFILES[key]); + const files = walk(dir); + for (const f of files) { + const t = fs.readFileSync(f, 'utf8'); + const hits = [...t.matchAll(re)]; + if (hits.length) { + const uniq = [...new Set(hits.map((h) => h[1]))]; + linesOut.push(`- \`${path.relative(root, f)}\`: \`${uniq.join('`, `')}\``); + } + } + } + return linesOut; +} + +function formatReportMarkdown(batchResults, tripleDashFixes, generatedAt) { + const lines = []; + lines.push('# Token migration report'); + lines.push(''); + lines.push(`Generated: ${generatedAt} (repo root: \`scripts/migrate-plasma-giga-config-tokens.mjs --all\`)`); + lines.push(''); + lines.push('## Summary'); + lines.push(''); + let totalMigrated = 0; + let totalConfigs = 0; + for (const r of batchResults) { + totalMigrated += r.migrated.length; + totalConfigs += r.totalConfigFiles; + } + lines.push(`- **Packages in batch:** ${batchResults.length}`); + lines.push(`- **Total \`.config.ts\` files scanned:** ${totalConfigs}`); + lines.push( + `- **Files updated in this run:** ${totalMigrated} (subsequent \`--all\` runs show **0** here if configs are already migrated; use git history for the first full pass)`, + ); + lines.push( + `- **Triple-dash typo fixes in this run:** ${tripleDashFixes.length} files (\`var(---x)\` → \`var(--x)\`, only where matches existed)`, + ); + lines.push(''); + + lines.push('## Theme / token mapping notes'); + lines.push(''); + lines.push('| Package profile | Token import | PR | Notes |'); + lines.push('|-----------------|--------------|----|-------|'); + for (const key of BATCH_PROFILE_KEYS) { + const p = PROFILES[key]; + const note = p.tokenThemeNote ? p.tokenThemeNote : '—'; + const prUrl = MIGRATION_PR_LINKS[key]; + const prCell = prUrl ? `[#${prUrl.match(/pull\/(\d+)/)?.[1] ?? '…'}](${prUrl})` : 'TBD'; + lines.push(`| \`${key}\` | \`${p.importPath}\` | ${prCell} | ${note} |`); + } + lines.push(''); + + lines.push('## Known bugs fixed before migration (`var(---…)` typos)'); + lines.push(''); + lines.push( + 'Some configs had **three (or more) hyphens** after `var(` (e.g. `var(---text-secondary-active)` instead of `var(--text-secondary-active)`). That is invalid CSS and broke the migrator’s `var(--*)` parser.', + ); + lines.push(''); + lines.push( + '> **First full batch (this repo effort):** 31 `*.config.ts` files under these packages were auto-corrected (`var(---x)` → `var(--x)`) before token migration. Re-running `--all` shows **0** in the table below unless new typos appear.', + ); + lines.push(''); + if (tripleDashFixes.length === 0) { + lines.push('- *(No triple-dash occurrences found in batch package configs during this run.)*'); + } else { + lines.push('Files auto-corrected (`var(---x)` → `var(--x)`):'); + lines.push(''); + lines.push('| File | Approx. matches fixed |'); + lines.push('|------|------------------------|'); + for (const x of tripleDashFixes) { + lines.push(`| \`${x.file}\` | ${x.replacements} |`); + } + } + lines.push(''); + lines.push('### Same typo elsewhere (not in this batch)'); + lines.push(''); + lines.push( + 'Other trees outside the batch (e.g. ad-hoc fixtures) may still contain `var(---…)` until migrated or fixed separately.', + ); + lines.push(''); + + const remainingTriple = scanTripleDashInProfiles(BATCH_PROFILE_KEYS); + lines.push('### Remaining `var(---…)` in batch packages (after this run)'); + lines.push(''); + if (remainingTriple.length === 0) { + lines.push( + '- None found under batch packages’ config roots (e.g. `src/components/**` or `src/examples/components/**`).', + ); + } else { + for (const row of remainingTriple) lines.push(row); + } + lines.push(''); + + lines.push('## Per-package results'); + lines.push(''); + lines.push( + '- **Written this run:** `.config.ts` files the script saved in this invocation (still had `var(--*)` in a styled-components css template and every variable resolved). Usually **0** or small once the package is already migrated.', + ); + lines.push( + '- **Configs importing theme:** count of `.config.ts` files under the config root whose source contains an import from that package’s theme module. Measured **after** the run; includes files not touched this run.', + ); + lines.push(''); + for (const r of batchResults) { + lines.push(`### \`${r.profileKey}\``); + lines.push(''); + lines.push(`- **Token module:** \`${path.relative(root, r.profile.tokensMod)}\``); + lines.push(`- **Import:** \`${r.profile.importPath}\``); + if (r.profile.componentsRelative) { + lines.push(`- **Config root:** \`${path.relative(root, componentsDirFor(r.profile))}\``); + } + lines.push(`- **Config files:** ${r.totalConfigFiles}`); + lines.push(`- **Written this run:** ${r.migrated.length}`); + lines.push(`- **No \`var(--*)\` (unchanged / already migrated):** ${r.noVarTokens.length}`); + lines.push( + `- **Skipped (has CSS variables but no styled-components ` + + '`css` template):** ' + + r.skippedNoCss.length, + ); + lines.push(`- **Failed (unresolved vars):** ${r.failedUnresolved.length}`); + lines.push(`- **Failed (triple-dash, if any before fix pass):** ${r.failedTripleDash.length}`); + lines.push(`- **Errors:** ${r.errors.length}`); + const migratedConfigsCount = countConfigFilesWithTokenImport( + r.profile.pkgRoot, + r.profile.importPath, + r.profile.componentsRelative ?? 'src/components', + ); + lines.push(`- **Configs importing theme:** ${migratedConfigsCount}`); + lines.push(''); + + if (r.skippedNoCss.length) { + lines.push('
'); + lines.push('Skipped (manual / non-css configs)'); + lines.push(''); + for (const p of r.skippedNoCss.sort()) lines.push(`- \`${p}\``); + lines.push(''); + lines.push('
'); + lines.push(''); + } + + if (r.failedUnresolved.length) { + lines.push('**Unresolved variables (not written):**'); + lines.push(''); + for (const f of r.failedUnresolved) { + lines.push(`- \`${f.rel}\`: ${f.unresolved.join(', ')}`); + } + lines.push(''); + } + + if (r.failedTripleDash.length) { + lines.push('**Triple-dash (should be empty after auto-fix):**'); + lines.push(''); + for (const f of r.failedTripleDash) { + lines.push(`- \`${f.rel}\`: ${f.tripleDash.join(', ')}`); + } + lines.push(''); + } + + if (r.errors.length) { + for (const e of r.errors) lines.push(`- Error \`${e.file}\`: ${e.error}`); + lines.push(''); + } + } + + lines.push('## Follow-up'); + lines.push(''); + lines.push( + '- **Scrollbar:** `Scrollbar/Scrollbar.config.ts` is handled by the migrator (quoted `var(--*)` → token imports). Other plain-object configs without `css` are still skipped unless added explicitly.', + ); + lines.push('- Run **ESLint with `--fix`** on touched packages if `import/order` or Prettier complain.'); + lines.push( + '- Re-run a single package: `node scripts/migrate-plasma-giga-config-tokens.mjs ` (profiles: `plasma-giga`, `sdds-sbcom`, …).', + ); + lines.push(''); + + lines.push('## Unresolved variables (why migration can fail)'); + lines.push(''); + lines.push( + '- **Legacy plasma-web “Old” typography** (`--plasma-typo-body1-*`, `display1`, `headline1`, …): these names are **not** present as string exports in `plasma_web/index.ts` (the theme uses the newer `--plasma-typo-body-m-*` / `dspl-*` scale). Migrate those configs manually or point them at the correct token exports.', + ); + lines.push( + '- **Theme-specific gaps**: some packages reference CSS variables (e.g. `--surface-primary`, `--plasma-input-*`, `--overlay-soft`) that **do not appear** in the matching `tokens/*/index.ts` file. Add tokens upstream, or replace with the closest exported token after design review.', + ); + lines.push( + '- **`--plasma-typo-*-bold-bold-*`**: duplicated `bold` segment in the variable name; the migrator normalizes `-bold-bold-` → `-bold-` when resolving typography.', + ); + lines.push(''); + + return lines.join('\n'); +} + +const argv = process.argv.slice(2); +const runAll = argv.includes('--all'); +const args = argv.filter((a) => !a.startsWith('--')); + +if (runAll) { + const generatedAt = new Date().toISOString(); + /** @type {{ file: string; replacements: number }[]} */ + const allTripleFixes = []; + for (const key of BATCH_PROFILE_KEYS) { + const componentsDir = componentsDirFor(PROFILES[key]); + const fixes = fixTripleDashInConfigs(componentsDir); + allTripleFixes.push(...fixes); + } + + /** @type {ReturnType[]} */ + const batchResults = []; + for (const key of BATCH_PROFILE_KEYS) { + batchResults.push(runProfile(key, { quiet: true })); + } + + for (const r of batchResults) { + console.log( + r.profileKey, + 'migrated:', + r.migrated.length, + 'skippedNoCss:', + r.skippedNoCss.length, + 'failed:', + r.failedUnresolved.length + r.failedTripleDash.length, + ); + } + + const md = formatReportMarkdown(batchResults, allTripleFixes, generatedAt); + fs.writeFileSync(path.join(root, 'TOKEN_MIGRATION_REPORT.md'), md, 'utf8'); + console.log('Wrote TOKEN_MIGRATION_REPORT.md'); +} else { + const profileArg = args[0] || 'plasma-giga'; + runProfile(profileArg, { quiet: false }); +} From d58a6205b4ab53e811fe23e992376affe17fae5f Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 14:10:48 +0300 Subject: [PATCH 02/24] chore(plasma-giga): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 285 +++-- .../src/components/Attach/Attach.config.ts | 899 +++++++------- .../Autocomplete/Autocomplete.config.ts | 553 +++++---- .../src/components/Badge/Badge.config.ts | 148 ++- .../Breadcrumbs/Breadcrumbs.config.ts | 68 +- .../src/components/Button/Button.config.ts | 258 ++-- .../ButtonGroup/ButtonGroup.config.ts | 300 +++-- .../components/Calendar/Calendar.config.ts | 460 ++++---- .../Calendar/CalendarDouble.config.ts | 460 ++++---- .../src/components/Card/Card.config.ts | 3 +- .../components/Carousel/Carousel.config.ts | 24 +- .../src/components/Cell/Cell.config.ts | 169 +-- .../components/Checkbox/Checkbox.config.ts | 156 +-- .../components/ChipGroup/ChipGroup.config.ts | 102 +- .../components/CodeField/CodeField.config.ts | 85 +- .../components/Combobox/Combobox.config.ts | 753 ++++++------ .../src/components/Counter/Counter.config.ts | 103 +- .../DatePicker/DatePicker.clear.config.ts | 1035 ++++++++-------- .../DatePicker/DatePicker.config.ts | 1022 ++++++++-------- .../DateTimePicker/DateTimePicker.config.ts | 954 ++++++++------- .../src/components/Divider/Divider.config.ts | 14 +- .../src/components/Drawer/Drawer.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 132 ++- .../components/Dropzone/Dropzone.config.ts | 53 +- .../EmbedIconButton/EmbedIconButton.config.ts | 125 +- .../EmptyState/EmptyState.config.ts | 49 +- .../src/components/File/File.config.ts | 158 +-- .../IconButton/IconButton.config.ts | 182 +-- .../InformationWrapper.config.ts | 295 ++--- .../LinkButton/LinkButton.config.ts | 210 ++-- .../src/components/List/List.config.ts | 77 +- .../src/components/Loader/Loader.config.ts | 181 +-- .../src/components/Modal/Modal.config.ts | 20 +- .../src/components/Note/Note.config.ts | 164 +-- .../Notification/Notification.config.ts | 196 +-- .../NumberInput/NumberInput.config.ts | 289 +++-- .../Pagination/Pagination.config.ts | 220 ++-- .../src/components/Popover/Popover.config.ts | 5 +- .../components/Progress/Progress.config.ts | 60 +- .../ProgressBarCircular.config.ts | 146 ++- .../components/Radiobox/Radiobox.config.ts | 154 +-- .../components/Range/Range.clear.config.ts | 484 ++++---- .../src/components/Range/Range.config.ts | 467 ++++---- .../src/components/Rating/Rating.config.ts | 385 +++--- .../components/Scrollbar/Scrollbar.config.ts | 6 +- .../components/Segment/SegmentGroup.config.ts | 11 +- .../components/Segment/SegmentItem.config.ts | 168 +-- .../src/components/Select/Select.config.ts | 1046 +++++++++-------- .../Skeleton/LineSkeleton.config.ts | 108 +- .../src/components/Slider/Slider.config.ts | 209 ++-- .../src/components/Spinner/Spinner.config.ts | 26 +- .../src/components/Steps/Steps.config.ts | 334 +++--- .../src/components/Switch/Switch.config.ts | 103 +- .../src/components/Table/Table.config.ts | 180 +-- .../HorizontalIconTabItem.config.ts | 70 +- .../horizontal/HorizontalTabItem.config.ts | 258 ++-- .../Tabs/horizontal/HorizontalTabs.config.ts | 36 +- .../vertical/VerticalIconTabItem.config.ts | 23 +- .../Tabs/vertical/VerticalTabItem.config.ts | 90 +- .../Tabs/vertical/VerticalTabs.config.ts | 17 +- .../TextArea/TextArea.clear.config.ts | 443 +++---- .../components/TextArea/TextArea.config.ts | 642 +++++----- .../TextField/TextField.clear.config.ts | 789 +++++++------ .../components/TextField/TextField.config.ts | 811 +++++++------ .../TextFieldGroup/TextFieldGroup.config.ts | 193 +-- .../TextFieldSlider.clear.config.ts | 606 +++++----- .../TextFieldSlider/TextFieldSlider.config.ts | 658 ++++++----- .../TimePicker/TimePicker.config.ts | 331 +++--- .../src/components/Toast/Toast.config.ts | 70 +- .../src/components/Toolbar/Toolbar.config.ts | 11 +- .../src/components/Tooltip/Tooltip.config.ts | 33 +- .../src/components/Tree/Tree.config.ts | 106 +- .../src/components/Typography/Body.config.ts | 97 +- .../src/components/Typography/Dspl.config.ts | 59 +- .../components/Typography/Heading.config.ts | 116 +- .../src/components/Typography/Text.config.ts | 78 +- 76 files changed, 10621 insertions(+), 9024 deletions(-) diff --git a/packages/plasma-giga/src/components/Accordion/Accordion.config.ts b/packages/plasma-giga/src/components/Accordion/Accordion.config.ts index d70ce2c93e6..c64e56bc666 100644 --- a/packages/plasma-giga/src/components/Accordion/Accordion.config.ts +++ b/packages/plasma-giga/src/components/Accordion/Accordion.config.ts @@ -1,4 +1,29 @@ import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; export const config = { defaults: { @@ -11,12 +36,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, @@ -24,14 +49,14 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -42,19 +67,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.875rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyLBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -63,19 +88,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -84,19 +109,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -105,19 +130,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXSBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.lineHeight}; `, h2: css` ${accordionTokens.accordionItemPaddingVertical}: 1rem; @@ -126,19 +151,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h2Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -147,19 +172,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 0.688rem; @@ -167,19 +192,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h5: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -187,19 +212,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h6: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -207,19 +232,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h6Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/plasma-giga/src/components/Attach/Attach.config.ts b/packages/plasma-giga/src/components/Attach/Attach.config.ts index b62ab061eec..a1f3413186c 100644 --- a/packages/plasma-giga/src/components/Attach/Attach.config.ts +++ b/packages/plasma-giga/src/components/Attach/Attach.config.ts @@ -1,3 +1,54 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,439 +61,439 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.buttonColorActive}: var(--text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.buttonColorHover}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.buttonColorActive}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.iconButtonColorHover}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.iconButtonColorActive}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary-hover); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.buttonColorActive}: var(--text-primary-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColorHover}: ${textPrimaryHover}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.buttonColorActive}: ${textPrimaryActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary-hover); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonColorActive}: var(--text-primary-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonColorActive}: ${textPrimaryActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, success: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-positive); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfacePositive}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, warning: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-warning); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceWarning}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, critical: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-negative); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceNegative}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-negative-active); - - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; + + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, dark: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, black: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, white: css` - ${attachTokens.buttonColor}: var(--on-light-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.buttonColor}: ${onLightTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -457,12 +508,12 @@ export const config = { ${attachTokens.buttonWidth}: 12.5rem; ${attachTokens.buttonPadding}: 1.5rem; ${attachTokens.buttonRadius}: 0.875rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyL.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -481,37 +532,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonHeight}: 3.5rem; ${attachTokens.iconButtonWidth}: 3.5rem; ${attachTokens.iconButtonPadding}: 1.5rem; ${attachTokens.iconButtonRadius}: 0.875rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -520,12 +571,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -547,12 +598,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -571,37 +622,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -610,12 +661,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -637,12 +688,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -661,37 +712,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -700,12 +751,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -727,12 +778,12 @@ export const config = { ${attachTokens.buttonWidth}: 10rem; ${attachTokens.buttonPadding}: 0.75rem; ${attachTokens.buttonRadius}: 0.5rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -751,37 +802,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.25rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2rem; ${attachTokens.iconButtonWidth}: 2rem; ${attachTokens.iconButtonPadding}: 0.75rem; ${attachTokens.iconButtonRadius}: 0.5rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -790,12 +841,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/plasma-giga/src/components/Autocomplete/Autocomplete.config.ts b/packages/plasma-giga/src/components/Autocomplete/Autocomplete.config.ts index 445f4504839..b0647ec6e8c 100644 --- a/packages/plasma-giga/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/plasma-giga/src/components/Autocomplete/Autocomplete.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,172 +40,172 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-positive); - ${tokens.textFieldDividerColorHover}: var(--surface-positive); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfacePositive}; + ${tokens.textFieldDividerColorHover}: ${surfacePositive}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-warning); - ${tokens.textFieldDividerColorHover}: var(--surface-warning); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceWarning}; + ${tokens.textFieldDividerColorHover}: ${surfaceWarning}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--surface-negative); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${surfaceNegative}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, }, size: { @@ -193,21 +224,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -215,12 +246,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -240,12 +271,12 @@ export const config = { ${tokens.itemPadding}: 1.0625rem 1rem; ${tokens.itemBorderRadius}: 0.75rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; ${tokens.emptyStateGap}: 0.5rem; @@ -268,21 +299,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -290,12 +321,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -315,12 +346,12 @@ export const config = { ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; ${tokens.emptyStateGap}: 0.375rem; @@ -343,21 +374,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -365,12 +396,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -390,12 +421,12 @@ export const config = { ${tokens.itemPadding}: 0.6875rem 0.75rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -418,21 +449,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -440,12 +471,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -465,12 +496,12 @@ export const config = { ${tokens.itemPadding}: 0.5625rem 0.5rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; ${tokens.emptyStateGap}: 0.25rem; @@ -481,22 +512,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -509,12 +540,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -533,12 +564,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -556,14 +587,14 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary}; `, }, }, diff --git a/packages/plasma-giga/src/components/Badge/Badge.config.ts b/packages/plasma-giga/src/components/Badge/Badge.config.ts index 3d8e8df196e..2dcf6332f2b 100644 --- a/packages/plasma-giga/src/components/Badge/Badge.config.ts +++ b/packages/plasma-giga/src/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +36,67 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -78,12 +106,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -97,12 +125,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -116,12 +144,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -135,12 +163,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -159,7 +187,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/plasma-giga/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/plasma-giga/src/components/Breadcrumbs/Breadcrumbs.config.ts index 1661a5df0e3..a1145fe6a3d 100644 --- a/packages/plasma-giga/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/plasma-giga/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,53 +20,53 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { l: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.5rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-l-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-l-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-l-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-l-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-l-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight}; `, m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${breadcrumbsTokens.breadcrumbsGap}: 0rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-xs-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-xs-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-xs-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-xs-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-xs-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-giga/src/components/Button/Button.config.ts b/packages/plasma-giga/src/components/Button/Button.config.ts index e879eadf37b..1a963b958a5 100644 --- a/packages/plasma-giga/src/components/Button/Button.config.ts +++ b/packages/plasma-giga/src/components/Button/Button.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; // INFO: Rounded radius. Should be removed after token will be added in theme @@ -12,104 +56,104 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -118,12 +162,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.75rem; ${buttonTokens.buttonRadius}: ${roundedRadius}; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.5rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -139,12 +183,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: ${roundedRadius}; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -160,12 +204,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: ${roundedRadius}; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -181,12 +225,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: ${roundedRadius}; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -202,12 +246,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: ${roundedRadius}; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -223,12 +267,12 @@ export const config = { ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: ${roundedRadius}; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 0.75rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -247,7 +291,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/plasma-giga/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/plasma-giga/src/components/ButtonGroup/ButtonGroup.config.ts index b2be2719277..601014f1433 100644 --- a/packages/plasma-giga/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/plasma-giga/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; // INFO: Rounded radius. Should be removed after token will be added in theme @@ -11,124 +59,124 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, success: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; `, }, size: { @@ -139,12 +187,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 4rem; ${buttonGroupTokens.buttonPadding}: 1.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, l: css` ${buttonGroupTokens.buttonDefaultRadius}: ${roundedRadius}; @@ -153,12 +201,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3.5rem; ${buttonGroupTokens.buttonPadding}: 1.5rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, m: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -168,12 +216,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -182,12 +230,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -196,12 +244,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -210,12 +258,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 1.5rem; ${buttonGroupTokens.buttonPadding}: 0.625rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/plasma-giga/src/components/Calendar/Calendar.config.ts b/packages/plasma-giga/src/components/Calendar/Calendar.config.ts index fc0a15388db..2ee9bec4fa2 100644 --- a/packages/plasma-giga/src/components/Calendar/Calendar.config.ts +++ b/packages/plasma-giga/src/components/Calendar/Calendar.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,38 +35,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -51,46 +77,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +126,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 4rem; ${calendarBaseTokens.iconButtonWidth}: 4rem; @@ -120,46 +146,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -169,13 +195,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3.5rem; ${calendarBaseTokens.iconButtonWidth}: 3.5rem; @@ -189,46 +215,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -238,13 +264,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -258,46 +284,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -307,13 +333,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -327,46 +353,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -376,13 +402,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; @@ -400,12 +426,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -414,7 +440,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -425,12 +451,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -439,7 +465,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/plasma-giga/src/components/Calendar/CalendarDouble.config.ts b/packages/plasma-giga/src/components/Calendar/CalendarDouble.config.ts index 70c9a8be880..f56042e2058 100644 --- a/packages/plasma-giga/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-giga/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,39 +35,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -52,46 +78,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +127,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 4rem; ${calendarDoubleTokens.iconButtonWidth}: 4rem; @@ -121,46 +147,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -170,13 +196,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; @@ -190,46 +216,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -239,13 +265,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -259,46 +285,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -308,13 +334,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -328,46 +354,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +403,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; @@ -401,12 +427,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -415,7 +441,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -426,12 +452,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -440,7 +466,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/plasma-giga/src/components/Card/Card.config.ts b/packages/plasma-giga/src/components/Card/Card.config.ts index 2899613fb13..526526437a9 100644 --- a/packages/plasma-giga/src/components/Card/Card.config.ts +++ b/packages/plasma-giga/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,7 +9,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/plasma-giga/src/components/Carousel/Carousel.config.ts b/packages/plasma-giga/src/components/Carousel/Carousel.config.ts index f3fd82e4491..adf7cb837f8 100644 --- a/packages/plasma-giga/src/components/Carousel/Carousel.config.ts +++ b/packages/plasma-giga/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +16,14 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary); - ${tokens.paginationDotActiveBackground}: var(--surface-solid-default); - ${tokens.controlIconButtonColor}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.controlIconButtonColorHover}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.controlIconButtonColorActive}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary}; + ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault}; + ${tokens.controlIconButtonColor}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.controlIconButtonColorHover}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.controlIconButtonColorActive}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, }, size: { diff --git a/packages/plasma-giga/src/components/Cell/Cell.config.ts b/packages/plasma-giga/src/components/Cell/Cell.config.ts index 6588088c11f..983931a4dba 100644 --- a/packages/plasma-giga/src/components/Cell/Cell.config.ts +++ b/packages/plasma-giga/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -87,26 +88,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -119,26 +120,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-giga/src/components/Checkbox/Checkbox.config.ts b/packages/plasma-giga/src/components/Checkbox/Checkbox.config.ts index 53d71aca8ad..ea77d87a42d 100644 --- a/packages/plasma-giga/src/components/Checkbox/Checkbox.config.ts +++ b/packages/plasma-giga/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,18 +33,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -39,18 +55,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${checkboxTokens.margin}: 0; @@ -60,91 +76,91 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.125rem; ${checkboxTokens.contentTopOffset}: 0.0625rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyL.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${checkboxTokens.fillColor}: var(--text-primary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPrimary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${checkboxTokens.fillColor}: var(--text-secondary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textSecondary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${checkboxTokens.fillColor}: var(--text-tertiary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textTertiary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${checkboxTokens.fillColor}: var(--text-paragraph); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textParagraph}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${checkboxTokens.fillColor}: var(--text-positive); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPositive}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${checkboxTokens.fillColor}: var(--text-warning); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textWarning}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, negative: css` - ${checkboxTokens.fillColor}: var(--text-negative); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textNegative}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-negative); + ${checkboxTokens.triggerBorderColor}: ${textNegative}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -155,7 +171,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/plasma-giga/src/components/ChipGroup/ChipGroup.config.ts b/packages/plasma-giga/src/components/ChipGroup/ChipGroup.config.ts index 2bed06ad8c0..83eae74ee03 100644 --- a/packages/plasma-giga/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/plasma-giga/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +26,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +57,12 @@ export const config = { ${tokens.chipHeight}: 3rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.5rem; @@ -60,12 +78,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -81,12 +99,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; @@ -102,12 +120,12 @@ export const config = { ${tokens.chipHeight}: 1.5rem; ${tokens.chipPadding}: 0 0.625rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/plasma-giga/src/components/CodeField/CodeField.config.ts b/packages/plasma-giga/src/components/CodeField/CodeField.config.ts index d0109404d66..ff70d7aaef2 100644 --- a/packages/plasma-giga/src/components/CodeField/CodeField.config.ts +++ b/packages/plasma-giga/src/components/CodeField/CodeField.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodyXS, + outlineAccent, + surfaceAccent, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, codeFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,19 +26,19 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--surface-accent); + ${tokens.caretColor}: ${surfaceAccent}; - ${tokens.captionColor}: var(--text-secondary); - ${tokens.captionColorError}: var(--text-negative); + ${tokens.captionColor}: ${textSecondary}; + ${tokens.captionColorError}: ${textNegative}; - ${tokens.codeColor}: var(--text-primary); - ${tokens.codeColorError}: var(--text-negative); - ${tokens.borderColorFocus}: var(--outline-accent); + ${tokens.codeColor}: ${textPrimary}; + ${tokens.codeColorError}: ${textNegative}; + ${tokens.borderColorFocus}: ${outlineAccent}; - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; `, }, size: { @@ -34,19 +51,19 @@ export const config = { ${tokens.codeItemWidth}: 2.75rem; ${tokens.codeItemHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.captionFontFamily}: ${bodyS.fontFamily}; + ${tokens.captionFontSize}: ${bodyS.fontSize}; + ${tokens.captionFontStyle}: ${bodyS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyS.lineHeight}; ${tokens.borderRadius}: 0.875rem; ${tokens.borderRadiusSegmented}: 0.375rem; @@ -61,19 +78,19 @@ export const config = { ${tokens.codeItemWidth}: 2.375rem; ${tokens.codeItemHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.captionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.captionFontSize}: ${bodyXS.fontSize}; + ${tokens.captionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyXS.lineHeight}; ${tokens.borderRadius}: 0.75rem; ${tokens.borderRadiusSegmented}: 0.25rem; diff --git a/packages/plasma-giga/src/components/Combobox/Combobox.config.ts b/packages/plasma-giga/src/components/Combobox/Combobox.config.ts index 9b023838c5d..187d033ca72 100644 --- a/packages/plasma-giga/src/components/Combobox/Combobox.config.ts +++ b/packages/plasma-giga/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,221 +40,221 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -243,20 +274,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -264,12 +295,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -292,12 +323,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 1rem; ${tokens.padding}: 0.125rem; @@ -319,19 +350,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -364,20 +395,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -385,12 +416,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -413,12 +444,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -440,19 +471,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -485,20 +516,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -506,12 +537,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -534,12 +565,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 0.625rem 0.875rem 0.625rem 0.875rem; ${tokens.padding}: 0.125rem; @@ -561,19 +592,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -606,20 +637,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -627,12 +658,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -655,12 +686,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 0.5rem 0.625rem 0.5rem 0.625rem; ${tokens.padding}: 0.125rem; @@ -682,19 +713,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -714,22 +745,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -742,12 +773,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -766,12 +797,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -789,13 +820,13 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/plasma-giga/src/components/Counter/Counter.config.ts b/packages/plasma-giga/src/components/Counter/Counter.config.ts index 140aa43a57f..77ac908e94d 100644 --- a/packages/plasma-giga/src/components/Counter/Counter.config.ts +++ b/packages/plasma-giga/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,32 +23,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -41,56 +56,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/plasma-giga/src/components/DatePicker/DatePicker.clear.config.ts b/packages/plasma-giga/src/components/DatePicker/DatePicker.clear.config.ts index c2e334a638a..f954a61fd88 100644 --- a/packages/plasma-giga/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/plasma-giga/src/components/DatePicker/DatePicker.clear.config.ts @@ -1,3 +1,46 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,64 +51,64 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); + ${tokens.outlineFocusColor}: ${surfaceAccent}; ${tokens.background}: transparent; ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.focusColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.focusColor}: ${textAccent}; ${tokens.textFieldBackgroundColor}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -74,76 +117,76 @@ export const config = { ${tokens.textFieldBackgroundSuccessColor}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -152,12 +195,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -167,12 +210,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -198,30 +241,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}:0.82rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; @@ -239,46 +282,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -289,25 +332,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -318,12 +361,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -333,12 +376,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -369,30 +412,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -410,46 +453,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -460,25 +503,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -489,12 +532,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -504,12 +547,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -540,30 +583,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -581,46 +624,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -631,25 +674,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -660,12 +703,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -675,12 +718,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -711,30 +754,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -752,46 +795,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -802,25 +845,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -831,12 +874,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -846,12 +889,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -882,30 +925,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -923,46 +966,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -973,25 +1016,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -1008,12 +1051,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1022,7 +1065,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1033,12 +1076,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1047,15 +1090,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1068,12 +1111,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1092,12 +1135,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1116,15 +1159,15 @@ export const config = { readOnly: { true: css` ${tokens.backgroundReadOnly}: transparent; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/plasma-giga/src/components/DatePicker/DatePicker.config.ts b/packages/plasma-giga/src/components/DatePicker/DatePicker.config.ts index aba695d13e2..3057cc4fd3c 100644 --- a/packages/plasma-giga/src/components/DatePicker/DatePicker.config.ts +++ b/packages/plasma-giga/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,110 +51,110 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -121,12 +163,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -136,12 +178,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -165,30 +207,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -206,46 +248,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -256,25 +298,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -285,12 +327,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -300,12 +342,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -335,30 +377,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -376,46 +418,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -426,25 +468,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -455,12 +497,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -470,12 +512,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -505,30 +547,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -546,46 +588,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -596,25 +638,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -625,12 +667,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -640,12 +682,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -675,30 +717,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -716,46 +758,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -766,25 +808,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -795,12 +837,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -810,12 +852,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -845,30 +887,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -886,46 +928,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -936,25 +978,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -971,12 +1013,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -985,7 +1027,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -996,12 +1038,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1010,15 +1052,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1031,12 +1073,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1055,12 +1097,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1078,16 +1120,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/plasma-giga/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/plasma-giga/src/components/DateTimePicker/DateTimePicker.config.ts index 6ac3406a0e3..f23701a91cb 100644 --- a/packages/plasma-giga/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/plasma-giga/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,91 +52,91 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -113,30 +155,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -146,12 +188,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -168,46 +210,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.875rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.875rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.875rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -218,13 +260,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; @@ -237,21 +279,21 @@ export const config = { ${tokens.timePickerItemHeight}: 4rem; ${tokens.timePickerItemBorderRadius}: 0.875rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -272,30 +314,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -305,12 +347,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -327,46 +369,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +419,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; @@ -396,21 +438,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3.5rem; ${tokens.timePickerItemBorderRadius}: 0.75rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -431,30 +473,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +506,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -486,46 +528,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -536,13 +578,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; @@ -555,21 +597,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3rem; ${tokens.timePickerItemBorderRadius}: 0.625rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyM.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyM.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyM.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -590,30 +632,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -623,12 +665,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -645,46 +687,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -695,13 +737,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -714,21 +756,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -749,30 +791,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -782,12 +824,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -804,46 +846,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -854,13 +896,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -873,21 +915,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -962,12 +1004,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -976,7 +1018,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -987,12 +1029,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1001,7 +1043,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -1011,12 +1053,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/plasma-giga/src/components/Divider/Divider.config.ts b/packages/plasma-giga/src/components/Divider/Divider.config.ts index df0449d5c06..5b099519b0c 100644 --- a/packages/plasma-giga/src/components/Divider/Divider.config.ts +++ b/packages/plasma-giga/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/plasma-giga/src/components/Drawer/Drawer.config.ts b/packages/plasma-giga/src/components/Drawer/Drawer.config.ts index b0b00b15040..0f735dac531 100644 --- a/packages/plasma-giga/src/components/Drawer/Drawer.config.ts +++ b/packages/plasma-giga/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/plasma-giga/src/components/Dropdown/Dropdown.config.ts b/packages/plasma-giga/src/components/Dropdown/Dropdown.config.ts index f14dd28fbd7..e4a1653f56f 100644 --- a/packages/plasma-giga/src/components/Dropdown/Dropdown.config.ts +++ b/packages/plasma-giga/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,11 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -24,12 +32,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.5rem; ${tokens.dividerMarginBottomTight}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -37,12 +45,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.padding}: 0.125rem; @@ -61,12 +69,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -74,12 +82,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.padding}: 0.125rem; @@ -98,12 +106,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -111,12 +119,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 0.125rem; @@ -135,12 +143,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -148,12 +156,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.padding}: 0.125rem; @@ -172,12 +180,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.125rem; ${tokens.dividerMarginBottomTight}: 0.125rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -185,18 +193,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/plasma-giga/src/components/Dropzone/Dropzone.config.ts b/packages/plasma-giga/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..2eeae922c91 100644 --- a/packages/plasma-giga/src/components/Dropzone/Dropzone.config.ts +++ b/packages/plasma-giga/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-giga/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/plasma-giga/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..0ffbd0a1c61 100644 --- a/packages/plasma-giga/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/plasma-giga/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-giga/src/components/EmptyState/EmptyState.config.ts b/packages/plasma-giga/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..0c62d013fec 100644 --- a/packages/plasma-giga/src/components/EmptyState/EmptyState.config.ts +++ b/packages/plasma-giga/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-giga/src/components/File/File.config.ts b/packages/plasma-giga/src/components/File/File.config.ts index 455a87f891b..0b6699cc89a 100644 --- a/packages/plasma-giga/src/components/File/File.config.ts +++ b/packages/plasma-giga/src/components/File/File.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, fileTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +24,36 @@ export const config = { variations: { view: { default: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-secondary); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textSecondary}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-solid-default); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; `, negative: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-negative); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textNegative}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-negative); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceNegative}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-negative); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceNegative}; `, }, size: { @@ -52,19 +68,19 @@ export const config = { ${tokens.cellGap}: 0.75rem; ${tokens.cellPaddingRightContent}: 0.75rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -94,19 +110,19 @@ export const config = { ${tokens.cellGap}: 0.625rem; ${tokens.cellPaddingRightContent}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -136,19 +152,19 @@ export const config = { ${tokens.cellGap}: 0.5rem; ${tokens.cellPaddingRightContent}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -178,19 +194,19 @@ export const config = { ${tokens.cellGap}: 0.375rem; ${tokens.cellPaddingRightContent}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 24; ${tokens.progressBarCircularHeight}: 1.5rem; diff --git a/packages/plasma-giga/src/components/IconButton/IconButton.config.ts b/packages/plasma-giga/src/components/IconButton/IconButton.config.ts index 9d760c4f3f2..452ecb4cc9a 100644 --- a/packages/plasma-giga/src/components/IconButton/IconButton.config.ts +++ b/packages/plasma-giga/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,74 +49,74 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -85,12 +125,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 4rem; ${iconButtonTokens.iconButtonPadding}: 1.75rem; ${iconButtonTokens.iconButtonRadius}: 1rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -100,12 +140,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3.5rem; ${iconButtonTokens.iconButtonPadding}: 1.5rem; ${iconButtonTokens.iconButtonRadius}: 0.875rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -115,12 +155,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -130,12 +170,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -145,12 +185,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -163,7 +203,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-giga/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/plasma-giga/src/components/InformationWrapper/InformationWrapper.config.ts index 45b90809f49..e17103d7bfd 100644 --- a/packages/plasma-giga/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/plasma-giga/src/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,18 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,50 +23,50 @@ export const config = { variations: { view: { default: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { l: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; @@ -63,29 +78,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -95,12 +110,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, m: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; @@ -112,29 +127,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -144,12 +159,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, s: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -161,29 +176,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -193,12 +208,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, xs: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; @@ -210,29 +225,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -244,10 +259,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -260,12 +275,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -284,12 +299,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; diff --git a/packages/plasma-giga/src/components/LinkButton/LinkButton.config.ts b/packages/plasma-giga/src/components/LinkButton/LinkButton.config.ts index 65d6cd4557f..461f4cc3196 100644 --- a/packages/plasma-giga/src/components/LinkButton/LinkButton.config.ts +++ b/packages/plasma-giga/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +38,70 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, }, size: { @@ -79,12 +109,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 4rem; ${linkButtonTokens.linkButtonPadding}: 1.25rem 0; ${linkButtonTokens.linkButtonRadius}: 1rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.5rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -98,12 +128,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3.5rem; ${linkButtonTokens.linkButtonPadding}: 1rem 0; ${linkButtonTokens.linkButtonRadius}: 0.875rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -117,12 +147,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -136,12 +166,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -155,12 +185,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -174,12 +204,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 1.5rem; ${linkButtonTokens.linkButtonPadding}: 0.375rem 0; ${linkButtonTokens.linkButtonRadius}: 0.375rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 0.75rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/plasma-giga/src/components/List/List.config.ts b/packages/plasma-giga/src/components/List/List.config.ts index b0a7acc37b0..0252cd5c0d4 100644 --- a/packages/plasma-giga/src/components/List/List.config.ts +++ b/packages/plasma-giga/src/components/List/List.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +17,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +38,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${listTokens.listItemFontFamily}: ${bodyXS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyXS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyXS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyXS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${listTokens.listItemPaddingTop}: 0.689rem; @@ -46,12 +55,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -63,12 +72,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -80,12 +89,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, xl: css` ${listTokens.listItemPaddingTop}: 1.3125rem; @@ -97,12 +106,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-giga/src/components/Loader/Loader.config.ts b/packages/plasma-giga/src/components/Loader/Loader.config.ts index 25fef650be1..2f241c535fe 100644 --- a/packages/plasma-giga/src/components/Loader/Loader.config.ts +++ b/packages/plasma-giga/src/components/Loader/Loader.config.ts @@ -1,3 +1,30 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + overlaySoft, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, loaderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +35,67 @@ export const config = { variations: { view: { default: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-solid-default); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceSolidDefault}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-primary); + ${loaderTokens.spinnerColor}: ${textPrimary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, secondary: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceTransparentSecondary}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-secondary); + ${loaderTokens.spinnerColor}: ${textSecondary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, accent: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-accent); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceAccent}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-accent); + ${loaderTokens.spinnerColor}: ${textAccent}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, positive: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-positive); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfacePositive}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-positive); + ${loaderTokens.spinnerColor}: ${textPositive}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, warning: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-warning); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceWarning}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-warning); + ${loaderTokens.spinnerColor}: ${textWarning}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, negative: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-negative); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceNegative}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-negative); + ${loaderTokens.spinnerColor}: ${textNegative}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, info: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-info); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceInfo}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-info); + ${loaderTokens.spinnerColor}: ${textInfo}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, }, size: { @@ -81,12 +108,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 8rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h2.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h2.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h2.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h2Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h2.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h2.lineHeight}; ${loaderTokens.spinnerSize}: 8rem; `, @@ -99,12 +126,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 5.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h5.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h5.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h5.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h5Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h5.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h5.lineHeight}; ${loaderTokens.spinnerSize}: 5.5rem; `, @@ -117,12 +144,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyL.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyL.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyL.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyL.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyL.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyL.lineHeight}; ${loaderTokens.spinnerSize}: 3.5rem; `, @@ -135,12 +162,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyM.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyM.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyM.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyM.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyM.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyM.lineHeight}; ${loaderTokens.spinnerSize}: 3rem; `, @@ -153,12 +180,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 2.25rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyS.lineHeight}; ${loaderTokens.spinnerSize}: 2.25rem; `, @@ -171,12 +198,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXS.lineHeight}; ${loaderTokens.spinnerSize}: 1.5rem; `, @@ -189,12 +216,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXXS.lineHeight}; ${loaderTokens.spinnerSize}: 1rem; `, diff --git a/packages/plasma-giga/src/components/Modal/Modal.config.ts b/packages/plasma-giga/src/components/Modal/Modal.config.ts index 8b107b98ea3..0e61207b28f 100644 --- a/packages/plasma-giga/src/components/Modal/Modal.config.ts +++ b/packages/plasma-giga/src/components/Modal/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,16 +16,16 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-giga/src/components/Note/Note.config.ts b/packages/plasma-giga/src/components/Note/Note.config.ts index 76e6e79ff13..e47a147feb8 100644 --- a/packages/plasma-giga/src/components/Note/Note.config.ts +++ b/packages/plasma-giga/src/components/Note/Note.config.ts @@ -1,3 +1,25 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textL, + textLBold, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textSecondary, + textSecondaryHover, + textWarning, + textXS, + textXSBold, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +30,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -44,8 +66,8 @@ export const config = { ${tokens.closeIconTop}: 1rem; ${tokens.closeIconRight}: 1rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -53,20 +75,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 2rem; ${tokens.fixedContentBeforePadding}: 0.25rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.titleFontFamily}: ${textL.fontFamily}; + ${tokens.titleFontSize}: ${textL.fontSize}; + ${tokens.titleFontStyle}: ${textL.fontStyle}; + ${tokens.titleFontWeight}: ${textLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textL.letterSpacing}; + ${tokens.titleLineHeight}: ${textL.lineHeight}; ${tokens.titlePaddingRight}: 1.875rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.textFontFamily}: ${textL.fontFamily}; + ${tokens.textFontSize}: ${textL.fontSize}; + ${tokens.textFontStyle}: ${textL.fontStyle}; + ${tokens.textFontWeight}: ${textL.fontWeight}; + ${tokens.textLetterSpacing}: ${textL.letterSpacing}; + ${tokens.textLineHeight}: ${textL.lineHeight}; `, m: css` ${tokens.padding}: 1.25rem 1.5rem; @@ -78,8 +100,8 @@ export const config = { ${tokens.closeIconTop}: 0.75rem; ${tokens.closeIconRight}: 0.75rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -87,20 +109,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; ${tokens.titlePaddingRight}: 1.75rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -112,8 +134,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -121,20 +143,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.titleFontFamily}: ${textS.fontFamily}; + ${tokens.titleFontSize}: ${textS.fontSize}; + ${tokens.titleFontStyle}: ${textS.fontStyle}; + ${tokens.titleFontWeight}: ${textSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; + ${tokens.titleLineHeight}: ${textS.lineHeight}; ${tokens.titlePaddingRight}: 1.625rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.textFontFamily}: ${textS.fontFamily}; + ${tokens.textFontSize}: ${textS.fontSize}; + ${tokens.textFontStyle}: ${textS.fontStyle}; + ${tokens.textFontWeight}: ${textS.fontWeight}; + ${tokens.textLetterSpacing}: ${textS.letterSpacing}; + ${tokens.textLineHeight}: ${textS.lineHeight}; `, xs: css` ${tokens.padding}: 0.75rem 1rem; @@ -146,8 +168,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1rem; ${tokens.closeIconButtonSize}: 1rem; @@ -155,20 +177,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.titleFontFamily}: ${textXS.fontFamily}; + ${tokens.titleFontSize}: ${textXS.fontSize}; + ${tokens.titleFontStyle}: ${textXS.fontStyle}; + ${tokens.titleFontWeight}: ${textXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.titleLineHeight}: ${textXS.lineHeight}; ${tokens.titlePaddingRight}: 1.5rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.textFontFamily}: ${textXS.fontFamily}; + ${tokens.textFontSize}: ${textXS.fontSize}; + ${tokens.textFontStyle}: ${textXS.fontStyle}; + ${tokens.textFontWeight}: ${textXS.fontWeight}; + ${tokens.textLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.textLineHeight}: ${textXS.lineHeight}; `, }, }, diff --git a/packages/plasma-giga/src/components/Notification/Notification.config.ts b/packages/plasma-giga/src/components/Notification/Notification.config.ts index 3963e77e1e2..1778ab3e4a2 100644 --- a/packages/plasma-giga/src/components/Notification/Notification.config.ts +++ b/packages/plasma-giga/src/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +20,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +52,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +106,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +160,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +214,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +268,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/plasma-giga/src/components/NumberInput/NumberInput.config.ts b/packages/plasma-giga/src/components/NumberInput/NumberInput.config.ts index e55e70fd713..22ff39effa2 100644 --- a/packages/plasma-giga/src/components/NumberInput/NumberInput.config.ts +++ b/packages/plasma-giga/src/components/NumberInput/NumberInput.config.ts @@ -1,3 +1,40 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseSurfaceTransparentSecondary, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextTertiary, + onDarkSurfaceTransparentSecondary, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextTertiary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,26 +47,26 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-solid-default); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${inverseSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceSolidDefault}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -37,26 +74,26 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, secondary: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.iconButtonColorSolidActive}: var(--text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -64,27 +101,27 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, accent: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--inverse-text-primary); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--on-dark-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--on-dark-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-accent); - - ${tokens.iconButtonColor}: var(--on-dark-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-accent); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${inverseTextPrimary}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${onDarkTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${onDarkTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${onDarkSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceAccent}; + + ${tokens.iconButtonColor}: ${onDarkTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${onDarkTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${onDarkTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -92,25 +129,25 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, clear: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; ${tokens.backgroundColorSolid}: transparent; - ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonColor}: ${textPrimary}; ${tokens.iconButtonBackgroundColor}: transparent; - ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; ${tokens.iconButtonBackgroundColorHover}: transparent; - ${tokens.iconButtonColorActive}: var(--text-primary-active); + ${tokens.iconButtonColorActive}: ${textPrimaryActive}; ${tokens.iconButtonBackgroundColorActive}: transparent; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -125,12 +162,12 @@ export const config = { ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${tokens.iconButtonRadius}: 0.875rem; ${tokens.iconButtonSegmentationRadius}: 0.375rem; @@ -140,12 +177,12 @@ export const config = { ${tokens.textWrapperHeight}: 3.5rem; ${tokens.textWrapperPadding}: 1.063rem 1.125rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -157,12 +194,12 @@ export const config = { ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -172,12 +209,12 @@ export const config = { ${tokens.textWrapperHeight}: 3rem; ${tokens.textWrapperPadding}: 0.875rem 1rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -189,12 +226,12 @@ export const config = { ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 1rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.625rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -204,12 +241,12 @@ export const config = { ${tokens.textWrapperHeight}: 2.5rem; ${tokens.textWrapperPadding}: 0.688rem 0.875rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -221,12 +258,12 @@ export const config = { ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.75rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${tokens.iconButtonRadius}: 0.5rem; ${tokens.iconButtonSegmentationRadius}: 0.125rem; @@ -236,12 +273,12 @@ export const config = { ${tokens.textWrapperHeight}: 2rem; ${tokens.textWrapperPadding}: 0.563rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -257,8 +294,8 @@ export const config = { }, inputBackgroundType: { fill: css` - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimary}; `, clear: css` ${tokens.backgroundColor}: transparent; diff --git a/packages/plasma-giga/src/components/Pagination/Pagination.config.ts b/packages/plasma-giga/src/components/Pagination/Pagination.config.ts index 5b9af725836..5854e1064c4 100644 --- a/packages/plasma-giga/src/components/Pagination/Pagination.config.ts +++ b/packages/plasma-giga/src/components/Pagination/Pagination.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,129 +39,129 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; ${paginationTokens.inputBorderColor}:transparent; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, }, size: { l: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-l-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-l-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-l-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-l-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyL.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyL.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyL.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyLBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyL.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyL.lineHeight}; ${paginationTokens.buttonHeight}: 3.5rem; ${paginationTokens.buttonWidth}: 3rem; @@ -167,12 +197,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, m: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; @@ -208,12 +238,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; @@ -249,12 +279,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, xs: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-xs-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-xs-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-xs-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyXS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyXS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyXS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyXSBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyXS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyXS.lineHeight}; ${paginationTokens.buttonHeight}: 2rem; ${paginationTokens.paginationInputWidth}: 2.5rem; diff --git a/packages/plasma-giga/src/components/Popover/Popover.config.ts b/packages/plasma-giga/src/components/Popover/Popover.config.ts index 2f9acaf14e8..2036e7c84b7 100644 --- a/packages/plasma-giga/src/components/Popover/Popover.config.ts +++ b/packages/plasma-giga/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/plasma-giga/src/components/Progress/Progress.config.ts b/packages/plasma-giga/src/components/Progress/Progress.config.ts index c81cf38a298..e38b4b7016f 100644 --- a/packages/plasma-giga/src/components/Progress/Progress.config.ts +++ b/packages/plasma-giga/src/components/Progress/Progress.config.ts @@ -1,3 +1,15 @@ +import { + surfaceAccent, + surfaceAccentGradient, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,44 +20,44 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, primary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, info: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-info); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceInfo}; + ${progressTokens.valueColor}: ${textTertiary}; `, success: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, error: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/plasma-giga/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/plasma-giga/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index 6a6449f99a4..8fab6d93a80 100644 --- a/packages/plasma-giga/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/plasma-giga/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +70,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -63,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -76,12 +96,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -89,12 +109,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -102,12 +122,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -115,12 +135,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -128,12 +148,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/plasma-giga/src/components/Radiobox/Radiobox.config.ts b/packages/plasma-giga/src/components/Radiobox/Radiobox.config.ts index d5fc23d48b3..91d1651ea3d 100644 --- a/packages/plasma-giga/src/components/Radiobox/Radiobox.config.ts +++ b/packages/plasma-giga/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,18 +37,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,18 +60,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${radioboxTokens.margin}: 0; @@ -66,19 +82,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.625rem; ${radioboxTokens.contentTopOffset}: 0.0625rem; ${radioboxTokens.contentLeftOffset}: 0.75rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyL.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -86,74 +102,74 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${radioboxTokens.fillColor}: var(--text-primary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPrimary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${radioboxTokens.fillColor}: var(--text-secondary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textSecondary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${radioboxTokens.fillColor}: var(--text-tertiary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textTertiary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${radioboxTokens.fillColor}: var(--text-paragraph); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textParagraph}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${radioboxTokens.fillColor}: var(--text-positive); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPositive}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${radioboxTokens.fillColor}: var(--text-warning); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textWarning}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated negative: css` - ${radioboxTokens.fillColor}: var(--text-negative); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textNegative}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -164,7 +180,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/plasma-giga/src/components/Range/Range.clear.config.ts b/packages/plasma-giga/src/components/Range/Range.clear.config.ts index 53faca3d526..7475577a607 100644 --- a/packages/plasma-giga/src/components/Range/Range.clear.config.ts +++ b/packages/plasma-giga/src/components/Range/Range.clear.config.ts @@ -1,3 +1,31 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -14,57 +42,57 @@ export const config = { ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); - - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldBackgroundColorHover}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -75,15 +103,15 @@ export const config = { ${tokens.textFieldBackgroundSuccessColorHover}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; `, }, size: { @@ -91,12 +119,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.5rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -104,24 +132,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -139,22 +167,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -168,12 +196,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -181,24 +209,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -216,22 +244,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -245,12 +273,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -258,24 +286,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -293,22 +321,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -322,12 +350,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -335,24 +363,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -370,22 +398,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -399,12 +427,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -412,24 +440,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -447,22 +475,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -475,10 +503,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -491,12 +519,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -515,12 +543,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -538,16 +566,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-giga/src/components/Range/Range.config.ts b/packages/plasma-giga/src/components/Range/Range.config.ts index af1793bb835..a0029c03f80 100644 --- a/packages/plasma-giga/src/components/Range/Range.config.ts +++ b/packages/plasma-giga/src/components/Range/Range.config.ts @@ -1,3 +1,32 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,55 +39,55 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorHover}: var(--surface-transparent-negative-hover); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorHover}: var(--surface-transparent-positive-hover); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -66,12 +95,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -79,24 +108,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 4rem; @@ -114,22 +143,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -142,12 +171,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -155,24 +184,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -190,22 +219,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -218,12 +247,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -231,24 +260,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -266,22 +295,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -294,12 +323,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -307,24 +336,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -342,22 +371,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -370,12 +399,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -383,24 +412,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -418,22 +447,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -445,10 +474,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -461,12 +490,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -485,12 +514,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -508,16 +537,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-giga/src/components/Rating/Rating.config.ts b/packages/plasma-giga/src/components/Rating/Rating.config.ts index 79e9f36f886..c1b0799f27c 100644 --- a/packages/plasma-giga/src/components/Rating/Rating.config.ts +++ b/packages/plasma-giga/src/components/Rating/Rating.config.ts @@ -1,3 +1,36 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + bodyXXS, + bodyXXSBold, + dsplL, + dsplLBold, + dsplM, + dsplMBold, + dsplS, + dsplSBold, + h1, + h1Bold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +41,36 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; // TODO: change with token data-yellow, when it will be added to theme ${tokens.iconColor}: #F3A912; - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { l: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -48,19 +81,19 @@ export const config = { m: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -71,19 +104,19 @@ export const config = { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -94,19 +127,19 @@ export const config = { xs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.iconMarginBottom}: 0.125rem; ${tokens.contentGap}: 0.375rem; @@ -121,19 +154,19 @@ export const config = { xxs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.fontFamily}: ${bodyXXS.fontFamily}; + ${tokens.fontSize}: ${bodyXXS.fontSize}; + ${tokens.fontStyle}: ${bodyXXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.contentGap}: 0.375rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -146,19 +179,19 @@ export const config = { h1: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tokens.fontFamily}: ${h1.fontFamily}; + ${tokens.fontSize}: ${h1.fontSize}; + ${tokens.fontStyle}: ${h1.fontStyle}; + ${tokens.fontWeight}: ${h1Bold.fontWeight}; + ${tokens.letterSpacing}: ${h1.letterSpacing}; + ${tokens.lineHeight}: ${h1.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.helperTextFontFamily}: ${bodyM.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyM.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyM.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyM.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyM.lineHeight}; ${tokens.contentGap}: 1rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -177,19 +210,19 @@ export const config = { h2: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tokens.fontFamily}: ${h2.fontFamily}; + ${tokens.fontSize}: ${h2.fontSize}; + ${tokens.fontStyle}: ${h2.fontStyle}; + ${tokens.fontWeight}: ${h2Bold.fontWeight}; + ${tokens.letterSpacing}: ${h2.letterSpacing}; + ${tokens.lineHeight}: ${h2.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.875rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -208,19 +241,19 @@ export const config = { h3: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.fontFamily}: ${h3.fontFamily}; + ${tokens.fontSize}: ${h3.fontSize}; + ${tokens.fontStyle}: ${h3.fontStyle}; + ${tokens.fontWeight}: ${h3Bold.fontWeight}; + ${tokens.letterSpacing}: ${h3.letterSpacing}; + ${tokens.lineHeight}: ${h3.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.75rem; ${tokens.singleIconContentGap}: 0.375rem; @@ -239,19 +272,19 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.fontFamily}: ${h4.fontFamily}; + ${tokens.fontSize}: ${h4.fontSize}; + ${tokens.fontStyle}: ${h4.fontStyle}; + ${tokens.fontWeight}: ${h4Bold.fontWeight}; + ${tokens.letterSpacing}: ${h4.letterSpacing}; + ${tokens.lineHeight}: ${h4.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -270,19 +303,19 @@ export const config = { h5: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.fontFamily}: ${h5.fontFamily}; + ${tokens.fontSize}: ${h5.fontSize}; + ${tokens.fontStyle}: ${h5.fontStyle}; + ${tokens.fontWeight}: ${h5Bold.fontWeight}; + ${tokens.letterSpacing}: ${h5.letterSpacing}; + ${tokens.lineHeight}: ${h5.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -301,19 +334,19 @@ export const config = { h6: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tokens.fontFamily}: ${h6.fontFamily}; + ${tokens.fontSize}: ${h6.fontSize}; + ${tokens.fontStyle}: ${h6.fontStyle}; + ${tokens.fontWeight}: ${h6Bold.fontWeight}; + ${tokens.letterSpacing}: ${h6.letterSpacing}; + ${tokens.lineHeight}: ${h6.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -332,19 +365,19 @@ export const config = { displayL: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${tokens.fontFamily}: ${dsplL.fontFamily}; + ${tokens.fontSize}: ${dsplL.fontSize}; + ${tokens.fontStyle}: ${dsplL.fontStyle}; + ${tokens.fontWeight}: ${dsplLBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplL.letterSpacing}; + ${tokens.lineHeight}: ${dsplL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.helperTextFontFamily}: ${h3.fontFamily}; + ${tokens.helperTextFontSize}: ${h3.fontSize}; + ${tokens.helperTextFontStyle}: ${h3.fontStyle}; + ${tokens.helperTextFontWeight}: ${h3.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing}; + ${tokens.helperTextLineHeight}: ${h3.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -363,19 +396,19 @@ export const config = { displayM: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${tokens.fontFamily}: ${dsplM.fontFamily}; + ${tokens.fontSize}: ${dsplM.fontSize}; + ${tokens.fontStyle}: ${dsplM.fontStyle}; + ${tokens.fontWeight}: ${dsplMBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplM.letterSpacing}; + ${tokens.lineHeight}: ${dsplM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -394,19 +427,19 @@ export const config = { displayS: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${dsplS.fontFamily}; + ${tokens.fontSize}: ${dsplS.fontSize}; + ${tokens.fontStyle}: ${dsplS.fontStyle}; + ${tokens.fontWeight}: ${dsplSBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplS.letterSpacing}; + ${tokens.lineHeight}: ${dsplS.lineHeight}; + + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; diff --git a/packages/plasma-giga/src/components/Scrollbar/Scrollbar.config.ts b/packages/plasma-giga/src/components/Scrollbar/Scrollbar.config.ts index 0220aa026dc..c626d3cb4bb 100644 --- a/packages/plasma-giga/src/components/Scrollbar/Scrollbar.config.ts +++ b/packages/plasma-giga/src/components/Scrollbar/Scrollbar.config.ts @@ -1,8 +1,10 @@ +import { surfaceTransparentPrimary, surfaceTransparentTertiary } from '@salutejs/plasma-themes/tokens/plasma_giga'; + export const config = { view: { default: { - trackColor: 'var(--surface-transparent-primary)', - thumbColor: 'var(--surface-transparent-tertiary)', + trackColor: surfaceTransparentPrimary, + thumbColor: surfaceTransparentTertiary, }, }, size: { diff --git a/packages/plasma-giga/src/components/Segment/SegmentGroup.config.ts b/packages/plasma-giga/src/components/Segment/SegmentGroup.config.ts index b03cb7140c7..d7d82f1bd2b 100644 --- a/packages/plasma-giga/src/components/Segment/SegmentGroup.config.ts +++ b/packages/plasma-giga/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +9,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -74,7 +75,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary}; `, }, orientation: { diff --git a/packages/plasma-giga/src/components/Segment/SegmentItem.config.ts b/packages/plasma-giga/src/components/Segment/SegmentItem.config.ts index 550c948b39d..24d07841fd0 100644 --- a/packages/plasma-giga/src/components/Segment/SegmentItem.config.ts +++ b/packages/plasma-giga/src/components/Segment/SegmentItem.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,68 +32,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -83,12 +107,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${segmentTokens.itemBorderRadius}: 0.625rem; @@ -100,12 +124,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -117,12 +141,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, l: css` ${segmentTokens.itemBorderRadius}: 0.875rem; @@ -134,12 +158,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, xl: css` ${segmentTokens.itemBorderRadius}: 1rem; @@ -151,12 +175,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-giga/src/components/Select/Select.config.ts b/packages/plasma-giga/src/components/Select/Select.config.ts index 6f238610edc..9a9142a2a06 100644 --- a/packages/plasma-giga/src/components/Select/Select.config.ts +++ b/packages/plasma-giga/src/components/Select/Select.config.ts @@ -1,3 +1,75 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + onLightTextSecondaryActive, + onLightTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,348 +82,348 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, accent: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-accent); - ${tokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-accent-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceAccent}; + ${tokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, secondary: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, clear: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-active); - ${tokens.buttonBackgroundColor}: var(--surface-clear); - ${tokens.buttonBackgroundColorHover}: var(--surface-clear); - ${tokens.buttonBackgroundColorActive}: var(--surface-clear); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryActive}; + ${tokens.buttonBackgroundColor}: ${surfaceClear}; + ${tokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${tokens.buttonBackgroundColorActive}: ${surfaceClear}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, dark: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-transparent-deep); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceTransparentDeep}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceTransparentDeepHover}; + ${tokens.buttonBackgroundColorActive}:${onLightSurfaceTransparentDeepActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, black: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, white: css` - ${tokens.buttonColor}: var(--on-light-text-primary); - ${tokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-light-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-light-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-light-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-light-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-dark-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); - - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); + ${tokens.buttonColor}: ${onLightTextPrimary}; + ${tokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onLightTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onLightTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onLightTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onLightTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onDarkSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onDarkSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}:${onDarkSurfaceSolidDefaultActive}; + + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -371,20 +443,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -392,12 +464,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -420,12 +492,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; ${tokens.targetHeight}: 3.5rem; @@ -451,19 +523,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -496,20 +568,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -517,12 +589,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -545,12 +617,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -576,19 +648,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -621,20 +693,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -642,12 +714,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -670,12 +742,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; @@ -701,19 +773,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -746,20 +818,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -767,12 +839,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -795,12 +867,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2rem; @@ -826,19 +898,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -858,69 +930,69 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -933,12 +1005,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -957,12 +1029,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -982,12 +1054,12 @@ export const config = { true: css` ${tokens.disclosureIconOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts index c3935131c38..942602aa499 100644 --- a/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/plasma-giga/src/components/Skeleton/LineSkeleton.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + dsplL, + dsplM, + dsplS, + h1, + h2, + h3, + h4, + h5, + h6, + surfaceSkeletonDeepGradient, + surfaceSkeletonGradient, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textL, + textM, + textS, + textXS, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, skeletonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,88 +32,88 @@ export const config = { variations: { view: { default: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient, var(--surface-skeleton-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, lighter: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient-lighter, var(--surface-skeleton-deep-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonDeepGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, }, size: { bodyL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size); + ${skeletonTokens.lineHeight}: ${bodyL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyL.fontSize}; `, bodyM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size); + ${skeletonTokens.lineHeight}: ${bodyM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyM.fontSize}; `, bodyS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size); + ${skeletonTokens.lineHeight}: ${bodyS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyS.fontSize}; `, bodyXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXS.fontSize}; `, bodyXXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXXS.fontSize}; `, dsplL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size); + ${skeletonTokens.lineHeight}: ${dsplL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplL.fontSize}; `, dsplM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size); + ${skeletonTokens.lineHeight}: ${dsplM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplM.fontSize}; `, dsplS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size); + ${skeletonTokens.lineHeight}: ${dsplS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplS.fontSize}; `, h1: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size); + ${skeletonTokens.lineHeight}: ${h1.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h1.fontSize}; `, h2: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size); + ${skeletonTokens.lineHeight}: ${h2.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h2.fontSize}; `, h3: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size); + ${skeletonTokens.lineHeight}: ${h3.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h3.fontSize}; `, h4: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size); + ${skeletonTokens.lineHeight}: ${h4.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h4.fontSize}; `, h5: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); + ${skeletonTokens.lineHeight}: ${h5.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h5.fontSize}; `, h6: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + ${skeletonTokens.lineHeight}: ${h6.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h6.fontSize}; `, textL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); + ${skeletonTokens.lineHeight}: ${textL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textL.fontSize}; `, textM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size); + ${skeletonTokens.lineHeight}: ${textM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textM.fontSize}; `, textS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size); + ${skeletonTokens.lineHeight}: ${textS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textS.fontSize}; `, textXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size); + ${skeletonTokens.lineHeight}: ${textXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textXS.fontSize}; `, }, }, diff --git a/packages/plasma-giga/src/components/Slider/Slider.config.ts b/packages/plasma-giga/src/components/Slider/Slider.config.ts index c171f134490..ad474a039d1 100644 --- a/packages/plasma-giga/src/components/Slider/Slider.config.ts +++ b/packages/plasma-giga/src/components/Slider/Slider.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + surfaceAccent, + surfaceAccentGradient, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +25,70 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, gradient: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent-gradient); + ${sliderTokens.fillColor}: ${surfaceAccentGradient}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, }, size: { @@ -85,24 +102,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -119,12 +136,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -136,24 +153,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -170,12 +187,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -187,24 +204,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -221,12 +238,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-giga/src/components/Spinner/Spinner.config.ts b/packages/plasma-giga/src/components/Spinner/Spinner.config.ts index 4d9f2104def..90e86367bf4 100644 --- a/packages/plasma-giga/src/components/Spinner/Spinner.config.ts +++ b/packages/plasma-giga/src/components/Spinner/Spinner.config.ts @@ -1,3 +1,13 @@ +import { + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +18,28 @@ export const config = { variations: { view: { default: css` - --plasma-spinner-color: var(--text-primary); + --plasma-spinner-color: ${textPrimary}; `, secondary: css` - --plasma-spinner-color: var(--text-secondary); + --plasma-spinner-color: ${textSecondary}; `, tertiary: css` - --plasma-spinner-color: var(--text-tertiary); + --plasma-spinner-color: ${textTertiary}; `, paragraph: css` - --plasma-spinner-color: var(--text-paragraph); + --plasma-spinner-color: ${textParagraph}; `, accent: css` - --plasma-spinner-color: var(--text-accent); + --plasma-spinner-color: ${textAccent}; `, positive: css` - --plasma-spinner-color: var(--text-positive); + --plasma-spinner-color: ${textPositive}; `, warning: css` - --plasma-spinner-color: var(--text-warning); + --plasma-spinner-color: ${textWarning}; `, negative: css` - --plasma-spinner-color: var(--text-negative); + --plasma-spinner-color: ${textNegative}; `, }, }, diff --git a/packages/plasma-giga/src/components/Steps/Steps.config.ts b/packages/plasma-giga/src/components/Steps/Steps.config.ts index ea931b9becc..547bb4d5737 100644 --- a/packages/plasma-giga/src/components/Steps/Steps.config.ts +++ b/packages/plasma-giga/src/components/Steps/Steps.config.ts @@ -1,43 +1,73 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); - - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; + + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -48,10 +78,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -61,26 +91,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -101,33 +131,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.5rem; ${tokens.largeBulletIndentHeight}: 1.25rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyL.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyM.fontFamily}; + ${tokens.contentFontSize}: ${bodyM.fontSize}; + ${tokens.contentFontStyle}: ${bodyM.fontStyle}; + ${tokens.contentFontWeight}: ${bodyM.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyM.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -148,33 +178,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -195,33 +225,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -242,33 +272,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 0.75rem; ${tokens.largeBulletIndentHeight}: 0.5rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -279,8 +309,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/plasma-giga/src/components/Switch/Switch.config.ts b/packages/plasma-giga/src/components/Switch/Switch.config.ts index 8a08bd686d8..d565b6f7bad 100644 --- a/packages/plasma-giga/src/components/Switch/Switch.config.ts +++ b/packages/plasma-giga/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,50 +24,50 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -83,17 +96,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -104,7 +117,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-giga/src/components/Table/Table.config.ts b/packages/plasma-giga/src/components/Table/Table.config.ts index 770fa22b6d8..5d42d746435 100644 --- a/packages/plasma-giga/src/components/Table/Table.config.ts +++ b/packages/plasma-giga/src/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + surfaceTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +28,12 @@ export const config = { }, size: { l: css` - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.headerRowHeight}: 3.125rem; ${tokens.rowHeight}: 3.125rem; @@ -31,9 +43,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.5rem; ${tokens.editableCellIconButtonWidth}: 3rem; @@ -42,18 +54,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.875rem; ${tokens.editableCellInputPadding}: 0 0.75rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.75rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.875rem; @@ -63,12 +75,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -76,20 +88,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.5rem 0.875rem; ${tokens.selectControlPanelGap}: 0.5rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight}; `, m: css` - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.headerRowHeight}: 2.75rem; ${tokens.rowHeight}: 2.75rem; @@ -99,9 +111,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.375rem; ${tokens.editableCellIconButtonWidth}: 2.5rem; @@ -110,18 +122,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.625rem; ${tokens.editableCellInputPadding}: 0 0.625rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.75rem; @@ -131,12 +143,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -144,20 +156,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.75rem; ${tokens.selectControlPanelGap}: 0.625rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, s: css` - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.headerRowHeight}: 2.125rem; ${tokens.rowHeight}: 2.125rem; @@ -167,9 +179,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.25rem; ${tokens.editableCellIconButtonWidth}: 2rem; @@ -178,18 +190,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.5rem; ${tokens.editableCellInputPadding}: 0 0.375rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.25rem 0.5rem; ${tokens.buttonHeight}: 1.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.625rem; @@ -199,12 +211,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.25rem 0 0; ${tokens.selectItemIconSize}: 1rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 0.875rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -212,12 +224,12 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.5rem; ${tokens.selectControlPanelGap}: 0.25rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 8b2e20b8ce7..32f43342d9b 100644 --- a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,13 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,78 +18,78 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; diff --git a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index a7252a1f7c0..1bd2e63cc53 100644 --- a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h1, + h2, + h3, + h4, + h5, + h6, + inverseTextPrimary, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,106 +34,106 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--on-dark-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--on-dark-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${onDarkTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${onDarkTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -123,12 +149,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -142,12 +168,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -161,12 +187,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -180,12 +206,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -197,12 +223,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tabsTokens.fontFamily}: ${h6.fontFamily}; + ${tabsTokens.fontSize}: ${h6.fontSize}; + ${tabsTokens.fontStyle}: ${h6.fontStyle}; + ${tabsTokens.fontWeight}: ${h6.fontWeight}; + ${tabsTokens.letterSpacing}: ${h6.letterSpacing}; + ${tabsTokens.lineHeight}: ${h6.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -214,12 +240,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -231,12 +257,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -248,12 +274,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -265,12 +291,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -282,12 +308,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts index bc3e5edf5c1..2e37b61743e 100644 --- a/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/plasma-giga/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +16,36 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/plasma-giga/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/plasma-giga/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index c1b4b62e4a1..821e9bfce39 100644 --- a/packages/plasma-giga/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/plasma-giga/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/plasma-giga/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/plasma-giga/src/components/Tabs/vertical/VerticalTabItem.config.ts index c819eeeacbd..80093bc949c 100644 --- a/packages/plasma-giga/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/plasma-giga/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +24,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +65,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -69,12 +85,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -89,12 +105,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -109,12 +125,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/plasma-giga/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/plasma-giga/src/components/Tabs/vertical/VerticalTabs.config.ts index 78eba3f047c..8a5e22354eb 100644 --- a/packages/plasma-giga/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/plasma-giga/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/plasma-giga/src/components/TextArea/TextArea.clear.config.ts b/packages/plasma-giga/src/components/TextArea/TextArea.clear.config.ts index 87abb38a0d7..36c2c339193 100644 --- a/packages/plasma-giga/src/components/TextArea/TextArea.clear.config.ts +++ b/packages/plasma-giga/src/components/TextArea/TextArea.clear.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -19,31 +42,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` ${tokens.inputBackgroundColor}: transparent; @@ -56,31 +79,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-positive); - ${tokens.inputColorFocus}: var(--text-positive); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPositive}; + ${tokens.inputColorFocus}: ${textPositive}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` ${tokens.inputBackgroundColor}: transparent; @@ -93,31 +116,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-warning); - ${tokens.inputColorFocus}: var(--text-warning); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textWarning}; + ${tokens.inputColorFocus}: ${textWarning}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` ${tokens.inputBackgroundColor}: transparent; @@ -130,31 +153,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-negative); - ${tokens.inputColorFocus}: var(--text-negative); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textNegative}; + ${tokens.inputColorFocus}: ${textNegative}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -184,30 +207,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -225,12 +248,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -258,30 +281,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -299,12 +322,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -332,30 +355,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -373,12 +396,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -406,30 +429,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -447,12 +470,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -480,30 +503,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -521,24 +544,24 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; ${tokens.tooltipBoxShadow}: var( --shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08) ); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -551,12 +574,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -575,12 +598,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -598,9 +621,9 @@ export const config = { }, readOnly: { true: css` - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/plasma-giga/src/components/TextArea/TextArea.config.ts b/packages/plasma-giga/src/components/TextArea/TextArea.config.ts index 9a056369045..5fe8376cb5f 100644 --- a/packages/plasma-giga/src/components/TextArea/TextArea.config.ts +++ b/packages/plasma-giga/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,41 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,172 +46,172 @@ export const config = { variations: { view: { default: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-primary); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-primary); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-positive); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-positive); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-positive); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textPositive}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-warning); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-warning); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-warning); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textWarning}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-negative); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-negative); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -202,30 +240,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -243,12 +281,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.751rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -275,30 +313,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -316,12 +354,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -348,30 +386,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -391,12 +429,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -423,30 +461,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.5rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +502,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -496,30 +534,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.375rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -537,20 +575,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -563,12 +601,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -587,12 +625,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -606,18 +644,18 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-giga/src/components/TextField/TextField.clear.config.ts b/packages/plasma-giga/src/components/TextField/TextField.clear.config.ts index 31d1a8122e8..32f636d18fd 100644 --- a/packages/plasma-giga/src/components/TextField/TextField.clear.config.ts +++ b/packages/plasma-giga/src/components/TextField/TextField.clear.config.ts @@ -1,3 +1,52 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,132 +58,132 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-positive); + ${tokens.color}: ${textPositive}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-positive); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textPositive}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-positive); - ${tokens.contentSlotColorHover}: var(--text-positive-hover); - ${tokens.contentSlotColorActive}: var(--text-positive-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPositive}; + ${tokens.contentSlotColorHover}: ${textPositiveHover}; + ${tokens.contentSlotColorActive}: ${textPositiveActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-warning); + ${tokens.color}: ${textWarning}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-warning); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textWarning}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-warning); - ${tokens.contentSlotColorHover}: var(--text-warning-hover); - ${tokens.contentSlotColorActive}: var(--text-warning-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textWarning}; + ${tokens.contentSlotColorHover}: ${textWarningHover}; + ${tokens.contentSlotColorActive}: ${textWarningActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-negative); + ${tokens.color}: ${textNegative}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-negative); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textNegative}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -151,40 +200,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -200,19 +249,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -235,40 +284,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -283,12 +332,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -311,40 +360,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -359,12 +408,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -387,40 +436,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -435,12 +484,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -463,40 +512,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -511,12 +560,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -529,126 +578,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -661,12 +710,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -685,12 +734,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -709,13 +758,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); + ${tokens.colorReadOnly}: ${textPrimary}; ${tokens.backgroundColorReadOnly}: transparent; - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/plasma-giga/src/components/TextField/TextField.config.ts b/packages/plasma-giga/src/components/TextField/TextField.config.ts index c029fa0c4a6..1e09ff1f444 100644 --- a/packages/plasma-giga/src/components/TextField/TextField.config.ts +++ b/packages/plasma-giga/src/components/TextField/TextField.config.ts @@ -1,3 +1,56 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,120 +62,120 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-positive); - ${tokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPositive}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-warning); - ${tokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentWarning}; + ${tokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -135,40 +188,40 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -184,19 +237,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -219,20 +272,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -240,20 +293,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -266,12 +319,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -297,20 +350,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -318,20 +371,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -344,12 +397,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -375,20 +428,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -396,20 +449,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -422,12 +475,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -453,20 +506,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -474,20 +527,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -500,12 +553,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -520,126 +573,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -652,12 +705,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -676,12 +729,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -700,13 +753,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/plasma-giga/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/plasma-giga/src/components/TextFieldGroup/TextFieldGroup.config.ts index 200d2e26ac4..58d09c816a6 100644 --- a/packages/plasma-giga/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/plasma-giga/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.textFieldDefaultRadius}: 0.75rem; @@ -77,28 +78,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -111,12 +112,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -133,28 +134,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -167,12 +168,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.textFieldSegmentedRadius}: 0.125rem; @@ -189,28 +190,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -223,12 +224,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts b/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts index a33164279df..74f91f17057 100644 --- a/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts +++ b/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + textAccent, + textNegative, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,10 +35,10 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -25,45 +51,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -76,45 +102,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-positive); - ${tokens.textFieldContentSlotColorHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColor}: ${textPositive}; + ${tokens.textFieldContentSlotColorHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorActive}: ${textPositiveActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-positive); + ${tokens.scaleValueColor}: ${textPositive}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -127,45 +153,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -178,50 +204,50 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-negative); + ${tokens.scaleValueColor}: ${textNegative}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -235,38 +261,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -288,12 +314,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -305,38 +331,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -358,12 +384,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -375,38 +401,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -428,12 +454,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -445,38 +471,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -498,12 +524,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -515,38 +541,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -568,20 +594,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -594,12 +620,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -618,12 +644,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -641,12 +667,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.config.ts b/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.config.ts index c63635d3490..2b4d4404f81 100644 --- a/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.config.ts +++ b/packages/plasma-giga/src/components/TextFieldSlider/TextFieldSlider.config.ts @@ -1,3 +1,35 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,207 +41,207 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; - ${tokens.textFieldBorderColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldBorderColorHover}: var(--text-secondary); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldBorderColorHover}: ${textSecondary}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-positive-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-warning-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -223,38 +255,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -276,12 +308,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -293,38 +325,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -346,12 +378,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -363,38 +395,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -416,12 +448,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -433,38 +465,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -486,12 +518,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -503,38 +535,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -556,20 +588,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -582,12 +614,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -606,12 +638,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -629,12 +661,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/plasma-giga/src/components/TimePicker/TimePicker.config.ts b/packages/plasma-giga/src/components/TimePicker/TimePicker.config.ts index b86cc9da0bd..7a5a6227ae0 100644 --- a/packages/plasma-giga/src/components/TimePicker/TimePicker.config.ts +++ b/packages/plasma-giga/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,45 +33,45 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; - ${tokens.labelColor}: var(--text-primary); + ${tokens.labelColor}: ${textPrimary}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); + ${tokens.timePickerShadow}: ${shadowDownSoftS}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -63,12 +86,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -80,12 +103,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -103,34 +126,34 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.5rem; @@ -146,12 +169,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -163,12 +186,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -186,34 +209,34 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -229,12 +252,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -246,12 +269,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -269,34 +292,34 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.813rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -312,12 +335,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -329,12 +352,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -352,34 +375,34 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -450,13 +473,13 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-giga/src/components/Toast/Toast.config.ts b/packages/plasma-giga/src/components/Toast/Toast.config.ts index 9678f1dd594..0bc3e35dbc4 100644 --- a/packages/plasma-giga/src/components/Toast/Toast.config.ts +++ b/packages/plasma-giga/src/components/Toast/Toast.config.ts @@ -1,3 +1,17 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,49 +23,49 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-positive); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textPositive}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-negative); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textNegative}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary); + ${toastTokens.closeIconColor}: ${onDarkTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary); + ${toastTokens.closeIconColor}: ${onLightTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextSecondary}; `, }, size: { @@ -59,12 +73,12 @@ export const config = { ${toastTokens.borderRadius}: 0.75rem; ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/plasma-giga/src/components/Toolbar/Toolbar.config.ts b/packages/plasma-giga/src/components/Toolbar/Toolbar.config.ts index 89581b0d6bf..159d75b3580 100644 --- a/packages/plasma-giga/src/components/Toolbar/Toolbar.config.ts +++ b/packages/plasma-giga/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/plasma-giga/src/components/Tooltip/Tooltip.config.ts b/packages/plasma-giga/src/components/Tooltip/Tooltip.config.ts index 2ca59cef4c5..24353e5c8af 100644 --- a/packages/plasma-giga/src/components/Tooltip/Tooltip.config.ts +++ b/packages/plasma-giga/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,4 @@ +import { bodyS, bodyXS, surfaceSolidCardBrightness, textPrimary } from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +17,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -30,7 +31,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -41,12 +42,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -55,15 +56,15 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.color}: ${textPrimary}; `, }, }, diff --git a/packages/plasma-giga/src/components/Tree/Tree.config.ts b/packages/plasma-giga/src/components/Tree/Tree.config.ts index e8cbfce73a6..717852f8732 100644 --- a/packages/plasma-giga/src/components/Tree/Tree.config.ts +++ b/packages/plasma-giga/src/components/Tree/Tree.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,24 +24,24 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -53,12 +69,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.itemHeight}: 3.5rem; @@ -84,12 +100,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.itemHeight}: 3rem; @@ -115,12 +131,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -146,12 +162,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.itemHeight}: 2rem; @@ -177,12 +193,12 @@ export const config = { ${tokens.checkboxInnerSize}: 0.875rem; ${tokens.checkboxBorderRadius}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-giga/src/components/Typography/Body.config.ts b/packages/plasma-giga/src/components/Typography/Body.config.ts index 23927fdf18c..9a84203683b 100644 --- a/packages/plasma-giga/src/components/Typography/Body.config.ts +++ b/packages/plasma-giga/src/components/Typography/Body.config.ts @@ -1,4 +1,21 @@ import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; export const configL = { defaults: { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/plasma-giga/src/components/Typography/Dspl.config.ts b/packages/plasma-giga/src/components/Typography/Dspl.config.ts index 3fb1245a027..ebec017e971 100644 --- a/packages/plasma-giga/src/components/Typography/Dspl.config.ts +++ b/packages/plasma-giga/src/components/Typography/Dspl.config.ts @@ -1,4 +1,15 @@ import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; export const configL = { defaults: { @@ -7,14 +18,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +38,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +58,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/plasma-giga/src/components/Typography/Heading.config.ts b/packages/plasma-giga/src/components/Typography/Heading.config.ts index 77f16729129..71fca3cebca 100644 --- a/packages/plasma-giga/src/components/Typography/Heading.config.ts +++ b/packages/plasma-giga/src/components/Typography/Heading.config.ts @@ -1,4 +1,24 @@ import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, + h6, + h6Bold, + h6Medium, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; export const configH1 = { defaults: { @@ -7,14 +27,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +46,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +65,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +84,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +103,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, @@ -102,14 +122,14 @@ export const configH6 = { variations: { size: { h6: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + ${typographyTokens.typoFontFamily}: ${h6.fontFamily}; + ${typographyTokens.typoFontSize}: ${h6.fontSize}; + ${typographyTokens.typoFontStyle}: ${h6.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h6.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h6Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h6Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h6.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h6.lineHeight}; `, }, }, diff --git a/packages/plasma-giga/src/components/Typography/Text.config.ts b/packages/plasma-giga/src/components/Typography/Text.config.ts index 542bc09a87d..3a83e4d94aa 100644 --- a/packages/plasma-giga/src/components/Typography/Text.config.ts +++ b/packages/plasma-giga/src/components/Typography/Text.config.ts @@ -1,4 +1,18 @@ import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_giga'; export const configL = { defaults: { @@ -7,14 +21,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +41,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +61,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +81,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, From effe5883a7f6c44d4859d5be52502e1d7a0c904f Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 16:17:59 +0300 Subject: [PATCH 03/24] chore(plasma-giga): fix shadow tokens usage --- .../src/components/Autocomplete/Autocomplete.config.ts | 2 +- packages/plasma-giga/src/components/Combobox/Combobox.config.ts | 2 +- .../components/InformationWrapper/InformationWrapper.config.ts | 2 +- packages/plasma-giga/src/components/Range/Range.clear.config.ts | 2 +- packages/plasma-giga/src/components/Range/Range.config.ts | 2 +- packages/plasma-giga/src/components/Select/Select.config.ts | 2 +- packages/plasma-giga/src/components/TextArea/TextArea.config.ts | 2 +- .../src/components/TextField/TextField.clear.config.ts | 2 +- .../plasma-giga/src/components/TextField/TextField.config.ts | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/plasma-giga/src/components/Autocomplete/Autocomplete.config.ts b/packages/plasma-giga/src/components/Autocomplete/Autocomplete.config.ts index b0647ec6e8c..23fb958d358 100644 --- a/packages/plasma-giga/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/plasma-giga/src/components/Autocomplete/Autocomplete.config.ts @@ -525,7 +525,7 @@ export const config = { hintView: { default: css` ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; - ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}; ${tokens.textFieldTooltipColor}: ${textPrimary}; ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, diff --git a/packages/plasma-giga/src/components/Combobox/Combobox.config.ts b/packages/plasma-giga/src/components/Combobox/Combobox.config.ts index 187d033ca72..4de8055e456 100644 --- a/packages/plasma-giga/src/components/Combobox/Combobox.config.ts +++ b/packages/plasma-giga/src/components/Combobox/Combobox.config.ts @@ -758,7 +758,7 @@ export const config = { hintView: { default: css` ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; - ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}; ${tokens.textFieldTooltipColor}: ${textPrimary}; ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, diff --git a/packages/plasma-giga/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/plasma-giga/src/components/InformationWrapper/InformationWrapper.config.ts index e17103d7bfd..7772a5a25af 100644 --- a/packages/plasma-giga/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/plasma-giga/src/components/InformationWrapper/InformationWrapper.config.ts @@ -260,7 +260,7 @@ export const config = { hintView: { default: css` ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; - ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}; ${tokens.tooltipColor}: ${textPrimary}; ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, diff --git a/packages/plasma-giga/src/components/Range/Range.clear.config.ts b/packages/plasma-giga/src/components/Range/Range.clear.config.ts index 7475577a607..8892262aeac 100644 --- a/packages/plasma-giga/src/components/Range/Range.clear.config.ts +++ b/packages/plasma-giga/src/components/Range/Range.clear.config.ts @@ -504,7 +504,7 @@ export const config = { hintView: { default: css` ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; - ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}; ${tokens.tooltipColor}: ${textPrimary}; ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, diff --git a/packages/plasma-giga/src/components/Range/Range.config.ts b/packages/plasma-giga/src/components/Range/Range.config.ts index a0029c03f80..88d9fed52b4 100644 --- a/packages/plasma-giga/src/components/Range/Range.config.ts +++ b/packages/plasma-giga/src/components/Range/Range.config.ts @@ -475,7 +475,7 @@ export const config = { hintView: { default: css` ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; - ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}; ${tokens.tooltipColor}: ${textPrimary}; ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, diff --git a/packages/plasma-giga/src/components/Select/Select.config.ts b/packages/plasma-giga/src/components/Select/Select.config.ts index 9a9142a2a06..550e98aa6b0 100644 --- a/packages/plasma-giga/src/components/Select/Select.config.ts +++ b/packages/plasma-giga/src/components/Select/Select.config.ts @@ -990,7 +990,7 @@ export const config = { hintView: { default: css` ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; - ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}; ${tokens.textFieldTooltipColor}: ${textPrimary}; ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, diff --git a/packages/plasma-giga/src/components/TextArea/TextArea.config.ts b/packages/plasma-giga/src/components/TextArea/TextArea.config.ts index 5fe8376cb5f..89a3ebc1169 100644 --- a/packages/plasma-giga/src/components/TextArea/TextArea.config.ts +++ b/packages/plasma-giga/src/components/TextArea/TextArea.config.ts @@ -586,7 +586,7 @@ export const config = { hintView: { default: css` ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; - ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}; ${tokens.tooltipColor}: ${textPrimary}; ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, diff --git a/packages/plasma-giga/src/components/TextField/TextField.clear.config.ts b/packages/plasma-giga/src/components/TextField/TextField.clear.config.ts index 32f636d18fd..a6d868f739e 100644 --- a/packages/plasma-giga/src/components/TextField/TextField.clear.config.ts +++ b/packages/plasma-giga/src/components/TextField/TextField.clear.config.ts @@ -695,7 +695,7 @@ export const config = { hintView: { default: css` ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; - ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}; ${tokens.tooltipColor}: ${textPrimary}; ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, diff --git a/packages/plasma-giga/src/components/TextField/TextField.config.ts b/packages/plasma-giga/src/components/TextField/TextField.config.ts index 1e09ff1f444..f025e23a602 100644 --- a/packages/plasma-giga/src/components/TextField/TextField.config.ts +++ b/packages/plasma-giga/src/components/TextField/TextField.config.ts @@ -690,7 +690,7 @@ export const config = { hintView: { default: css` ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; - ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}; ${tokens.tooltipColor}: ${textPrimary}; ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, From 5c7553f31f383d2823390763fd449c3f1d744128 Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 18:17:06 +0300 Subject: [PATCH 04/24] chore(plasma-giga): Breadcrumbs: fix bold styles --- .../Breadcrumbs/Breadcrumbs.config.ts | 21 +++++-------------- 1 file changed, 5 insertions(+), 16 deletions(-) diff --git a/packages/plasma-giga/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/plasma-giga/src/components/Breadcrumbs/Breadcrumbs.config.ts index a1145fe6a3d..cd21459ef7e 100644 --- a/packages/plasma-giga/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/plasma-giga/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,15 +1,4 @@ -import { - bodyL, - bodyLBold, - bodyM, - bodyMBold, - bodyS, - bodySBold, - bodyXS, - bodyXSBold, - surfaceAccent, - textPrimary, -} from '@salutejs/plasma-themes/tokens/plasma_giga'; +import { bodyL, bodyM, bodyS, bodyXS, surfaceAccent, textPrimary } from '@salutejs/plasma-themes/tokens/plasma_giga'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -34,7 +23,7 @@ export const config = { ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily}; ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize}; ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle}; - ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyL.fontWeight}; ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing}; ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight}; `, @@ -44,7 +33,7 @@ export const config = { ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; - ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyM.fontWeight}; ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, @@ -54,7 +43,7 @@ export const config = { ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; - ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyS.fontWeight}; ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, @@ -64,7 +53,7 @@ export const config = { ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily}; ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize}; ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle}; - ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXS.fontWeight}; ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing}; ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight}; `, From 146eba7b97b0a998ec43ed829894e44344fb30f6 Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 16:20:51 +0300 Subject: [PATCH 05/24] chore(sdds-sbcom): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 285 +++-- .../src/components/Attach/Attach.config.ts | 899 +++++++------- .../Autocomplete/Autocomplete.config.ts | 553 +++++---- .../src/components/Badge/Badge.config.ts | 148 ++- .../Breadcrumbs/Breadcrumbs.config.ts | 68 +- .../src/components/Button/Button.config.ts | 258 ++-- .../ButtonGroup/ButtonGroup.config.ts | 300 +++-- .../components/Calendar/Calendar.config.ts | 460 ++++---- .../Calendar/CalendarDouble.config.ts | 460 ++++---- .../src/components/Card/Card.config.ts | 3 +- .../components/Carousel/Carousel.config.ts | 24 +- .../src/components/Cell/Cell.config.ts | 169 +-- .../components/Checkbox/Checkbox.config.ts | 156 +-- .../components/ChipGroup/ChipGroup.config.ts | 102 +- .../components/CodeField/CodeField.config.ts | 85 +- .../components/Combobox/Combobox.config.ts | 753 ++++++------ .../src/components/Counter/Counter.config.ts | 103 +- .../DatePicker/DatePicker.clear.config.ts | 1035 ++++++++-------- .../DatePicker/DatePicker.config.ts | 1022 ++++++++-------- .../DateTimePicker/DateTimePicker.config.ts | 954 ++++++++------- .../src/components/Divider/Divider.config.ts | 14 +- .../src/components/Drawer/Drawer.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 132 ++- .../components/Dropzone/Dropzone.config.ts | 53 +- .../EmbedIconButton/EmbedIconButton.config.ts | 125 +- .../EmptyState/EmptyState.config.ts | 49 +- .../src/components/File/File.config.ts | 158 +-- .../IconButton/IconButton.config.ts | 182 +-- .../InformationWrapper.config.ts | 295 ++--- .../LinkButton/LinkButton.config.ts | 210 ++-- .../src/components/List/List.config.ts | 77 +- .../src/components/Loader/Loader.config.ts | 181 +-- .../src/components/Modal/Modal.config.ts | 20 +- .../src/components/Note/Note.config.ts | 164 +-- .../Notification/Notification.config.ts | 196 +-- .../NumberInput/NumberInput.config.ts | 289 +++-- .../Pagination/Pagination.config.ts | 220 ++-- .../src/components/Popover/Popover.config.ts | 5 +- .../components/Progress/Progress.config.ts | 60 +- .../ProgressBarCircular.config.ts | 146 ++- .../components/Radiobox/Radiobox.config.ts | 154 +-- .../components/Range/Range.clear.config.ts | 484 ++++---- .../src/components/Range/Range.config.ts | 467 ++++---- .../src/components/Rating/Rating.config.ts | 385 +++--- .../components/Scrollbar/Scrollbar.config.ts | 6 +- .../components/Segment/SegmentGroup.config.ts | 11 +- .../components/Segment/SegmentItem.config.ts | 168 +-- .../src/components/Select/Select.config.ts | 1046 +++++++++-------- .../Skeleton/LineSkeleton.config.ts | 108 +- .../src/components/Slider/Slider.config.ts | 209 ++-- .../src/components/Steps/Steps.config.ts | 332 +++--- .../src/components/Switch/Switch.config.ts | 103 +- .../src/components/Table/Table.config.ts | 180 +-- .../HorizontalIconTabItem.config.ts | 70 +- .../horizontal/HorizontalTabItem.config.ts | 258 ++-- .../Tabs/horizontal/HorizontalTabs.config.ts | 36 +- .../vertical/VerticalIconTabItem.config.ts | 23 +- .../Tabs/vertical/VerticalTabItem.config.ts | 90 +- .../Tabs/vertical/VerticalTabs.config.ts | 17 +- .../TextArea/TextArea.clear.config.ts | 443 +++---- .../components/TextArea/TextArea.config.ts | 642 +++++----- .../TextField/TextField.clear.config.ts | 789 +++++++------ .../components/TextField/TextField.config.ts | 811 +++++++------ .../TextFieldGroup/TextFieldGroup.config.ts | 193 +-- .../TextFieldSlider.clear.config.ts | 606 +++++----- .../TextFieldSlider/TextFieldSlider.config.ts | 658 ++++++----- .../TimePicker/TimePicker.config.ts | 331 +++--- .../src/components/Toast/Toast.config.ts | 70 +- .../src/components/Toolbar/Toolbar.config.ts | 11 +- .../src/components/Tooltip/Tooltip.config.ts | 33 +- .../src/components/Tree/Tree.config.ts | 106 +- .../src/components/Typography/Body.config.ts | 97 +- .../src/components/Typography/Dspl.config.ts | 17 +- .../components/Typography/Heading.config.ts | 78 +- 74 files changed, 10508 insertions(+), 8951 deletions(-) diff --git a/packages/sdds-sbcom/src/components/Accordion/Accordion.config.ts b/packages/sdds-sbcom/src/components/Accordion/Accordion.config.ts index d70ce2c93e6..2c3fac82aab 100644 --- a/packages/sdds-sbcom/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-sbcom/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,28 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,12 +36,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, @@ -24,14 +49,14 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -42,19 +67,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.875rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyLBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -63,19 +88,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -84,19 +109,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -105,19 +130,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXSBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.lineHeight}; `, h2: css` ${accordionTokens.accordionItemPaddingVertical}: 1rem; @@ -126,19 +151,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h2Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -147,19 +172,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 0.688rem; @@ -167,19 +192,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h5: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -187,19 +212,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h6: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -207,19 +232,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h6Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Attach/Attach.config.ts b/packages/sdds-sbcom/src/components/Attach/Attach.config.ts index b62ab061eec..14ae4051a6a 100644 --- a/packages/sdds-sbcom/src/components/Attach/Attach.config.ts +++ b/packages/sdds-sbcom/src/components/Attach/Attach.config.ts @@ -1,3 +1,54 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,439 +61,439 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.buttonColorActive}: var(--text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.buttonColorHover}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.buttonColorActive}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.iconButtonColorHover}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.iconButtonColorActive}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary-hover); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.buttonColorActive}: var(--text-primary-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColorHover}: ${textPrimaryHover}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.buttonColorActive}: ${textPrimaryActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary-hover); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonColorActive}: var(--text-primary-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonColorActive}: ${textPrimaryActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, success: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-positive); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfacePositive}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, warning: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-warning); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceWarning}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, critical: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-negative); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceNegative}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-negative-active); - - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; + + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, dark: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, black: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, white: css` - ${attachTokens.buttonColor}: var(--on-light-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.buttonColor}: ${onLightTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -457,12 +508,12 @@ export const config = { ${attachTokens.buttonWidth}: 12.5rem; ${attachTokens.buttonPadding}: 1.5rem; ${attachTokens.buttonRadius}: 0.875rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyL.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -481,37 +532,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonHeight}: 3.5rem; ${attachTokens.iconButtonWidth}: 3.5rem; ${attachTokens.iconButtonPadding}: 1.5rem; ${attachTokens.iconButtonRadius}: 0.875rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -520,12 +571,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -547,12 +598,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -571,37 +622,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -610,12 +661,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -637,12 +688,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -661,37 +712,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -700,12 +751,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -727,12 +778,12 @@ export const config = { ${attachTokens.buttonWidth}: 10rem; ${attachTokens.buttonPadding}: 0.75rem; ${attachTokens.buttonRadius}: 0.5rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -751,37 +802,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.25rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2rem; ${attachTokens.iconButtonWidth}: 2rem; ${attachTokens.iconButtonPadding}: 0.75rem; ${attachTokens.iconButtonRadius}: 0.5rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -790,12 +841,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/sdds-sbcom/src/components/Autocomplete/Autocomplete.config.ts b/packages/sdds-sbcom/src/components/Autocomplete/Autocomplete.config.ts index 445f4504839..2d3c07d0b46 100644 --- a/packages/sdds-sbcom/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/sdds-sbcom/src/components/Autocomplete/Autocomplete.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,172 +40,172 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-positive); - ${tokens.textFieldDividerColorHover}: var(--surface-positive); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfacePositive}; + ${tokens.textFieldDividerColorHover}: ${surfacePositive}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-warning); - ${tokens.textFieldDividerColorHover}: var(--surface-warning); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceWarning}; + ${tokens.textFieldDividerColorHover}: ${surfaceWarning}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--surface-negative); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${surfaceNegative}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, }, size: { @@ -193,21 +224,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -215,12 +246,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -240,12 +271,12 @@ export const config = { ${tokens.itemPadding}: 1.0625rem 1rem; ${tokens.itemBorderRadius}: 0.75rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; ${tokens.emptyStateGap}: 0.5rem; @@ -268,21 +299,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -290,12 +321,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -315,12 +346,12 @@ export const config = { ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; ${tokens.emptyStateGap}: 0.375rem; @@ -343,21 +374,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -365,12 +396,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -390,12 +421,12 @@ export const config = { ${tokens.itemPadding}: 0.6875rem 0.75rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -418,21 +449,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -440,12 +471,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -465,12 +496,12 @@ export const config = { ${tokens.itemPadding}: 0.5625rem 0.5rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; ${tokens.emptyStateGap}: 0.25rem; @@ -481,22 +512,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -509,12 +540,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -533,12 +564,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -556,14 +587,14 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Badge/Badge.config.ts b/packages/sdds-sbcom/src/components/Badge/Badge.config.ts index 3d8e8df196e..afa86cb2a42 100644 --- a/packages/sdds-sbcom/src/components/Badge/Badge.config.ts +++ b/packages/sdds-sbcom/src/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +36,67 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -78,12 +106,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -97,12 +125,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -116,12 +144,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -135,12 +163,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -159,7 +187,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/sdds-sbcom/src/components/Breadcrumbs/Breadcrumbs.config.ts index 1661a5df0e3..10d646d09ee 100644 --- a/packages/sdds-sbcom/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/sdds-sbcom/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,53 +20,53 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { l: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.5rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-l-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-l-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-l-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-l-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-l-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight}; `, m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${breadcrumbsTokens.breadcrumbsGap}: 0rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-xs-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-xs-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-xs-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-xs-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-xs-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Button/Button.config.ts b/packages/sdds-sbcom/src/components/Button/Button.config.ts index 5d4e666a7b9..96d4e51a9d1 100644 --- a/packages/sdds-sbcom/src/components/Button/Button.config.ts +++ b/packages/sdds-sbcom/src/components/Button/Button.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,104 +53,104 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -115,12 +159,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.75rem; ${buttonTokens.buttonRadius}: 1rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.5rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -136,12 +180,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 0.875rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -157,12 +201,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -178,12 +222,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -199,12 +243,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -220,12 +264,12 @@ export const config = { ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: 0.375rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 0.75rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -244,7 +288,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/sdds-sbcom/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/sdds-sbcom/src/components/ButtonGroup/ButtonGroup.config.ts index 38cdcc186d3..dfbbeb7ddb7 100644 --- a/packages/sdds-sbcom/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/sdds-sbcom/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,124 +56,124 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, success: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; `, }, size: { @@ -136,12 +184,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 4rem; ${buttonGroupTokens.buttonPadding}: 1.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, l: css` ${buttonGroupTokens.buttonDefaultRadius}: 0.875rem; @@ -150,12 +198,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3.5rem; ${buttonGroupTokens.buttonPadding}: 1.5rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, m: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -165,12 +213,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -179,12 +227,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -193,12 +241,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -207,12 +255,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 1.5rem; ${buttonGroupTokens.buttonPadding}: 0.625rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-sbcom/src/components/Calendar/Calendar.config.ts b/packages/sdds-sbcom/src/components/Calendar/Calendar.config.ts index fc0a15388db..0c3cd475c75 100644 --- a/packages/sdds-sbcom/src/components/Calendar/Calendar.config.ts +++ b/packages/sdds-sbcom/src/components/Calendar/Calendar.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,38 +35,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -51,46 +77,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +126,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 4rem; ${calendarBaseTokens.iconButtonWidth}: 4rem; @@ -120,46 +146,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -169,13 +195,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3.5rem; ${calendarBaseTokens.iconButtonWidth}: 3.5rem; @@ -189,46 +215,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -238,13 +264,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -258,46 +284,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -307,13 +333,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -327,46 +353,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -376,13 +402,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; @@ -400,12 +426,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -414,7 +440,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -425,12 +451,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -439,7 +465,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-sbcom/src/components/Calendar/CalendarDouble.config.ts index 70c9a8be880..89c6700979e 100644 --- a/packages/sdds-sbcom/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-sbcom/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,39 +35,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -52,46 +78,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +127,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 4rem; ${calendarDoubleTokens.iconButtonWidth}: 4rem; @@ -121,46 +147,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -170,13 +196,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; @@ -190,46 +216,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -239,13 +265,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -259,46 +285,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -308,13 +334,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -328,46 +354,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +403,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; @@ -401,12 +427,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -415,7 +441,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -426,12 +452,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -440,7 +466,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Card/Card.config.ts b/packages/sdds-sbcom/src/components/Card/Card.config.ts index 2899613fb13..fa1c9e7caeb 100644 --- a/packages/sdds-sbcom/src/components/Card/Card.config.ts +++ b/packages/sdds-sbcom/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,7 +9,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/sdds-sbcom/src/components/Carousel/Carousel.config.ts b/packages/sdds-sbcom/src/components/Carousel/Carousel.config.ts index f3fd82e4491..c08459e48f3 100644 --- a/packages/sdds-sbcom/src/components/Carousel/Carousel.config.ts +++ b/packages/sdds-sbcom/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +16,14 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary); - ${tokens.paginationDotActiveBackground}: var(--surface-solid-default); - ${tokens.controlIconButtonColor}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.controlIconButtonColorHover}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.controlIconButtonColorActive}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary}; + ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault}; + ${tokens.controlIconButtonColor}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.controlIconButtonColorHover}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.controlIconButtonColorActive}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, }, size: { diff --git a/packages/sdds-sbcom/src/components/Cell/Cell.config.ts b/packages/sdds-sbcom/src/components/Cell/Cell.config.ts index 6588088c11f..b1ed5d72ddb 100644 --- a/packages/sdds-sbcom/src/components/Cell/Cell.config.ts +++ b/packages/sdds-sbcom/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -87,26 +88,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -119,26 +120,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Checkbox/Checkbox.config.ts b/packages/sdds-sbcom/src/components/Checkbox/Checkbox.config.ts index 53d71aca8ad..5502d4ab787 100644 --- a/packages/sdds-sbcom/src/components/Checkbox/Checkbox.config.ts +++ b/packages/sdds-sbcom/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,18 +33,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -39,18 +55,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${checkboxTokens.margin}: 0; @@ -60,91 +76,91 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.125rem; ${checkboxTokens.contentTopOffset}: 0.0625rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyL.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${checkboxTokens.fillColor}: var(--text-primary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPrimary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${checkboxTokens.fillColor}: var(--text-secondary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textSecondary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${checkboxTokens.fillColor}: var(--text-tertiary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textTertiary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${checkboxTokens.fillColor}: var(--text-paragraph); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textParagraph}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${checkboxTokens.fillColor}: var(--text-positive); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPositive}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${checkboxTokens.fillColor}: var(--text-warning); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textWarning}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, negative: css` - ${checkboxTokens.fillColor}: var(--text-negative); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textNegative}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-negative); + ${checkboxTokens.triggerBorderColor}: ${textNegative}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -155,7 +171,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/ChipGroup/ChipGroup.config.ts b/packages/sdds-sbcom/src/components/ChipGroup/ChipGroup.config.ts index 2bed06ad8c0..9b2d11dc888 100644 --- a/packages/sdds-sbcom/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/sdds-sbcom/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +26,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +57,12 @@ export const config = { ${tokens.chipHeight}: 3rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.5rem; @@ -60,12 +78,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -81,12 +99,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; @@ -102,12 +120,12 @@ export const config = { ${tokens.chipHeight}: 1.5rem; ${tokens.chipPadding}: 0 0.625rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/sdds-sbcom/src/components/CodeField/CodeField.config.ts b/packages/sdds-sbcom/src/components/CodeField/CodeField.config.ts index d0109404d66..a1e68f19a64 100644 --- a/packages/sdds-sbcom/src/components/CodeField/CodeField.config.ts +++ b/packages/sdds-sbcom/src/components/CodeField/CodeField.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodyXS, + outlineAccent, + surfaceAccent, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, codeFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,19 +26,19 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--surface-accent); + ${tokens.caretColor}: ${surfaceAccent}; - ${tokens.captionColor}: var(--text-secondary); - ${tokens.captionColorError}: var(--text-negative); + ${tokens.captionColor}: ${textSecondary}; + ${tokens.captionColorError}: ${textNegative}; - ${tokens.codeColor}: var(--text-primary); - ${tokens.codeColorError}: var(--text-negative); - ${tokens.borderColorFocus}: var(--outline-accent); + ${tokens.codeColor}: ${textPrimary}; + ${tokens.codeColorError}: ${textNegative}; + ${tokens.borderColorFocus}: ${outlineAccent}; - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; `, }, size: { @@ -34,19 +51,19 @@ export const config = { ${tokens.codeItemWidth}: 2.75rem; ${tokens.codeItemHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.captionFontFamily}: ${bodyS.fontFamily}; + ${tokens.captionFontSize}: ${bodyS.fontSize}; + ${tokens.captionFontStyle}: ${bodyS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyS.lineHeight}; ${tokens.borderRadius}: 0.875rem; ${tokens.borderRadiusSegmented}: 0.375rem; @@ -61,19 +78,19 @@ export const config = { ${tokens.codeItemWidth}: 2.375rem; ${tokens.codeItemHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.captionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.captionFontSize}: ${bodyXS.fontSize}; + ${tokens.captionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyXS.lineHeight}; ${tokens.borderRadius}: 0.75rem; ${tokens.borderRadiusSegmented}: 0.25rem; diff --git a/packages/sdds-sbcom/src/components/Combobox/Combobox.config.ts b/packages/sdds-sbcom/src/components/Combobox/Combobox.config.ts index 9b023838c5d..f1c1bc86fe6 100644 --- a/packages/sdds-sbcom/src/components/Combobox/Combobox.config.ts +++ b/packages/sdds-sbcom/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,221 +40,221 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -243,20 +274,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -264,12 +295,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -292,12 +323,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 1rem; ${tokens.padding}: 0.125rem; @@ -319,19 +350,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -364,20 +395,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -385,12 +416,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -413,12 +444,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -440,19 +471,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -485,20 +516,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -506,12 +537,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -534,12 +565,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 0.625rem 0.875rem 0.625rem 0.875rem; ${tokens.padding}: 0.125rem; @@ -561,19 +592,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -606,20 +637,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -627,12 +658,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -655,12 +686,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 0.5rem 0.625rem 0.5rem 0.625rem; ${tokens.padding}: 0.125rem; @@ -682,19 +713,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -714,22 +745,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -742,12 +773,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -766,12 +797,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -789,13 +820,13 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Counter/Counter.config.ts b/packages/sdds-sbcom/src/components/Counter/Counter.config.ts index 140aa43a57f..8c1f41aefa8 100644 --- a/packages/sdds-sbcom/src/components/Counter/Counter.config.ts +++ b/packages/sdds-sbcom/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,32 +23,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -41,56 +56,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/DatePicker/DatePicker.clear.config.ts b/packages/sdds-sbcom/src/components/DatePicker/DatePicker.clear.config.ts index c2e334a638a..63c05a7808b 100644 --- a/packages/sdds-sbcom/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/sdds-sbcom/src/components/DatePicker/DatePicker.clear.config.ts @@ -1,3 +1,46 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,64 +51,64 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); + ${tokens.outlineFocusColor}: ${surfaceAccent}; ${tokens.background}: transparent; ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.focusColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.focusColor}: ${textAccent}; ${tokens.textFieldBackgroundColor}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -74,76 +117,76 @@ export const config = { ${tokens.textFieldBackgroundSuccessColor}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -152,12 +195,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -167,12 +210,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -198,30 +241,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}:0.82rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; @@ -239,46 +282,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -289,25 +332,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -318,12 +361,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -333,12 +376,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -369,30 +412,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -410,46 +453,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -460,25 +503,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -489,12 +532,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -504,12 +547,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -540,30 +583,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -581,46 +624,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -631,25 +674,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -660,12 +703,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -675,12 +718,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -711,30 +754,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -752,46 +795,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -802,25 +845,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -831,12 +874,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -846,12 +889,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -882,30 +925,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -923,46 +966,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -973,25 +1016,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -1008,12 +1051,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1022,7 +1065,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1033,12 +1076,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1047,15 +1090,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1068,12 +1111,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1092,12 +1135,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1116,15 +1159,15 @@ export const config = { readOnly: { true: css` ${tokens.backgroundReadOnly}: transparent; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-sbcom/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-sbcom/src/components/DatePicker/DatePicker.config.ts index aba695d13e2..d6a94e88163 100644 --- a/packages/sdds-sbcom/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-sbcom/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,110 +51,110 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -121,12 +163,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -136,12 +178,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -165,30 +207,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -206,46 +248,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -256,25 +298,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -285,12 +327,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -300,12 +342,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -335,30 +377,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -376,46 +418,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -426,25 +468,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -455,12 +497,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -470,12 +512,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -505,30 +547,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -546,46 +588,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -596,25 +638,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -625,12 +667,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -640,12 +682,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -675,30 +717,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -716,46 +758,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -766,25 +808,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -795,12 +837,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -810,12 +852,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -845,30 +887,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -886,46 +928,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -936,25 +978,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -971,12 +1013,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -985,7 +1027,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -996,12 +1038,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1010,15 +1052,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1031,12 +1073,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1055,12 +1097,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1078,16 +1120,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-sbcom/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/sdds-sbcom/src/components/DateTimePicker/DateTimePicker.config.ts index 6ac3406a0e3..faeeaed079f 100644 --- a/packages/sdds-sbcom/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/sdds-sbcom/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,91 +52,91 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -113,30 +155,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -146,12 +188,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -168,46 +210,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.875rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.875rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.875rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -218,13 +260,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; @@ -237,21 +279,21 @@ export const config = { ${tokens.timePickerItemHeight}: 4rem; ${tokens.timePickerItemBorderRadius}: 0.875rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -272,30 +314,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -305,12 +347,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -327,46 +369,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +419,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; @@ -396,21 +438,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3.5rem; ${tokens.timePickerItemBorderRadius}: 0.75rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -431,30 +473,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +506,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -486,46 +528,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -536,13 +578,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; @@ -555,21 +597,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3rem; ${tokens.timePickerItemBorderRadius}: 0.625rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyM.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyM.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyM.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -590,30 +632,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -623,12 +665,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -645,46 +687,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -695,13 +737,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -714,21 +756,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -749,30 +791,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -782,12 +824,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -804,46 +846,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -854,13 +896,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -873,21 +915,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -962,12 +1004,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -976,7 +1018,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -987,12 +1029,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1001,7 +1043,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -1011,12 +1053,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-sbcom/src/components/Divider/Divider.config.ts b/packages/sdds-sbcom/src/components/Divider/Divider.config.ts index df0449d5c06..88b3cac3759 100644 --- a/packages/sdds-sbcom/src/components/Divider/Divider.config.ts +++ b/packages/sdds-sbcom/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/sdds-sbcom/src/components/Drawer/Drawer.config.ts b/packages/sdds-sbcom/src/components/Drawer/Drawer.config.ts index b0b00b15040..640ddb09ef6 100644 --- a/packages/sdds-sbcom/src/components/Drawer/Drawer.config.ts +++ b/packages/sdds-sbcom/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/sdds-sbcom/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-sbcom/src/components/Dropdown/Dropdown.config.ts index f14dd28fbd7..8d4eda0bb26 100644 --- a/packages/sdds-sbcom/src/components/Dropdown/Dropdown.config.ts +++ b/packages/sdds-sbcom/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,11 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -24,12 +32,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.5rem; ${tokens.dividerMarginBottomTight}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -37,12 +45,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.padding}: 0.125rem; @@ -61,12 +69,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -74,12 +82,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.padding}: 0.125rem; @@ -98,12 +106,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -111,12 +119,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 0.125rem; @@ -135,12 +143,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -148,12 +156,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.padding}: 0.125rem; @@ -172,12 +180,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.125rem; ${tokens.dividerMarginBottomTight}: 0.125rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -185,18 +193,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-sbcom/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..4da51fc5187 100644 --- a/packages/sdds-sbcom/src/components/Dropzone/Dropzone.config.ts +++ b/packages/sdds-sbcom/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-sbcom/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/sdds-sbcom/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..3d6344bb126 100644 --- a/packages/sdds-sbcom/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/sdds-sbcom/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/EmptyState/EmptyState.config.ts b/packages/sdds-sbcom/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..3d72a72af49 100644 --- a/packages/sdds-sbcom/src/components/EmptyState/EmptyState.config.ts +++ b/packages/sdds-sbcom/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/File/File.config.ts b/packages/sdds-sbcom/src/components/File/File.config.ts index 455a87f891b..57e46e32694 100644 --- a/packages/sdds-sbcom/src/components/File/File.config.ts +++ b/packages/sdds-sbcom/src/components/File/File.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, fileTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +24,36 @@ export const config = { variations: { view: { default: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-secondary); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textSecondary}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-solid-default); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; `, negative: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-negative); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textNegative}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-negative); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceNegative}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-negative); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceNegative}; `, }, size: { @@ -52,19 +68,19 @@ export const config = { ${tokens.cellGap}: 0.75rem; ${tokens.cellPaddingRightContent}: 0.75rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -94,19 +110,19 @@ export const config = { ${tokens.cellGap}: 0.625rem; ${tokens.cellPaddingRightContent}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -136,19 +152,19 @@ export const config = { ${tokens.cellGap}: 0.5rem; ${tokens.cellPaddingRightContent}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -178,19 +194,19 @@ export const config = { ${tokens.cellGap}: 0.375rem; ${tokens.cellPaddingRightContent}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 24; ${tokens.progressBarCircularHeight}: 1.5rem; diff --git a/packages/sdds-sbcom/src/components/IconButton/IconButton.config.ts b/packages/sdds-sbcom/src/components/IconButton/IconButton.config.ts index 9d760c4f3f2..ab1af428452 100644 --- a/packages/sdds-sbcom/src/components/IconButton/IconButton.config.ts +++ b/packages/sdds-sbcom/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,74 +49,74 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -85,12 +125,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 4rem; ${iconButtonTokens.iconButtonPadding}: 1.75rem; ${iconButtonTokens.iconButtonRadius}: 1rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -100,12 +140,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3.5rem; ${iconButtonTokens.iconButtonPadding}: 1.5rem; ${iconButtonTokens.iconButtonRadius}: 0.875rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -115,12 +155,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -130,12 +170,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -145,12 +185,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -163,7 +203,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/sdds-sbcom/src/components/InformationWrapper/InformationWrapper.config.ts index 45b90809f49..1ddd734c77e 100644 --- a/packages/sdds-sbcom/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/sdds-sbcom/src/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,18 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,50 +23,50 @@ export const config = { variations: { view: { default: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { l: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; @@ -63,29 +78,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -95,12 +110,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, m: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; @@ -112,29 +127,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -144,12 +159,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, s: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -161,29 +176,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -193,12 +208,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, xs: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; @@ -210,29 +225,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -244,10 +259,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -260,12 +275,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -284,12 +299,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; diff --git a/packages/sdds-sbcom/src/components/LinkButton/LinkButton.config.ts b/packages/sdds-sbcom/src/components/LinkButton/LinkButton.config.ts index 65d6cd4557f..a7894c7ff8b 100644 --- a/packages/sdds-sbcom/src/components/LinkButton/LinkButton.config.ts +++ b/packages/sdds-sbcom/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +38,70 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, }, size: { @@ -79,12 +109,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 4rem; ${linkButtonTokens.linkButtonPadding}: 1.25rem 0; ${linkButtonTokens.linkButtonRadius}: 1rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.5rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -98,12 +128,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3.5rem; ${linkButtonTokens.linkButtonPadding}: 1rem 0; ${linkButtonTokens.linkButtonRadius}: 0.875rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -117,12 +147,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -136,12 +166,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -155,12 +185,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -174,12 +204,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 1.5rem; ${linkButtonTokens.linkButtonPadding}: 0.375rem 0; ${linkButtonTokens.linkButtonRadius}: 0.375rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 0.75rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/sdds-sbcom/src/components/List/List.config.ts b/packages/sdds-sbcom/src/components/List/List.config.ts index b0a7acc37b0..4af981fe984 100644 --- a/packages/sdds-sbcom/src/components/List/List.config.ts +++ b/packages/sdds-sbcom/src/components/List/List.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +17,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +38,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${listTokens.listItemFontFamily}: ${bodyXS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyXS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyXS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyXS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${listTokens.listItemPaddingTop}: 0.689rem; @@ -46,12 +55,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -63,12 +72,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -80,12 +89,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, xl: css` ${listTokens.listItemPaddingTop}: 1.3125rem; @@ -97,12 +106,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-sbcom/src/components/Loader/Loader.config.ts b/packages/sdds-sbcom/src/components/Loader/Loader.config.ts index 25fef650be1..4cb79310652 100644 --- a/packages/sdds-sbcom/src/components/Loader/Loader.config.ts +++ b/packages/sdds-sbcom/src/components/Loader/Loader.config.ts @@ -1,3 +1,30 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + overlaySoft, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, loaderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +35,67 @@ export const config = { variations: { view: { default: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-solid-default); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceSolidDefault}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-primary); + ${loaderTokens.spinnerColor}: ${textPrimary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, secondary: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceTransparentSecondary}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-secondary); + ${loaderTokens.spinnerColor}: ${textSecondary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, accent: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-accent); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceAccent}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-accent); + ${loaderTokens.spinnerColor}: ${textAccent}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, positive: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-positive); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfacePositive}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-positive); + ${loaderTokens.spinnerColor}: ${textPositive}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, warning: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-warning); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceWarning}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-warning); + ${loaderTokens.spinnerColor}: ${textWarning}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, negative: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-negative); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceNegative}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-negative); + ${loaderTokens.spinnerColor}: ${textNegative}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, info: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-info); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceInfo}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-info); + ${loaderTokens.spinnerColor}: ${textInfo}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, }, size: { @@ -81,12 +108,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 8rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h2.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h2.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h2.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h2Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h2.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h2.lineHeight}; ${loaderTokens.spinnerSize}: 8rem; `, @@ -99,12 +126,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 5.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h5.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h5.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h5.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h5Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h5.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h5.lineHeight}; ${loaderTokens.spinnerSize}: 5.5rem; `, @@ -117,12 +144,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyL.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyL.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyL.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyL.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyL.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyL.lineHeight}; ${loaderTokens.spinnerSize}: 3.5rem; `, @@ -135,12 +162,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyM.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyM.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyM.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyM.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyM.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyM.lineHeight}; ${loaderTokens.spinnerSize}: 3rem; `, @@ -153,12 +180,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 2.25rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyS.lineHeight}; ${loaderTokens.spinnerSize}: 2.25rem; `, @@ -171,12 +198,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXS.lineHeight}; ${loaderTokens.spinnerSize}: 1.5rem; `, @@ -189,12 +216,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXXS.lineHeight}; ${loaderTokens.spinnerSize}: 1rem; `, diff --git a/packages/sdds-sbcom/src/components/Modal/Modal.config.ts b/packages/sdds-sbcom/src/components/Modal/Modal.config.ts index 8b107b98ea3..11844e74884 100644 --- a/packages/sdds-sbcom/src/components/Modal/Modal.config.ts +++ b/packages/sdds-sbcom/src/components/Modal/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,16 +16,16 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Note/Note.config.ts b/packages/sdds-sbcom/src/components/Note/Note.config.ts index 76e6e79ff13..e31642927f2 100644 --- a/packages/sdds-sbcom/src/components/Note/Note.config.ts +++ b/packages/sdds-sbcom/src/components/Note/Note.config.ts @@ -1,3 +1,25 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textL, + textLBold, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textSecondary, + textSecondaryHover, + textWarning, + textXS, + textXSBold, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +30,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -44,8 +66,8 @@ export const config = { ${tokens.closeIconTop}: 1rem; ${tokens.closeIconRight}: 1rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -53,20 +75,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 2rem; ${tokens.fixedContentBeforePadding}: 0.25rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.titleFontFamily}: ${textL.fontFamily}; + ${tokens.titleFontSize}: ${textL.fontSize}; + ${tokens.titleFontStyle}: ${textL.fontStyle}; + ${tokens.titleFontWeight}: ${textLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textL.letterSpacing}; + ${tokens.titleLineHeight}: ${textL.lineHeight}; ${tokens.titlePaddingRight}: 1.875rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.textFontFamily}: ${textL.fontFamily}; + ${tokens.textFontSize}: ${textL.fontSize}; + ${tokens.textFontStyle}: ${textL.fontStyle}; + ${tokens.textFontWeight}: ${textL.fontWeight}; + ${tokens.textLetterSpacing}: ${textL.letterSpacing}; + ${tokens.textLineHeight}: ${textL.lineHeight}; `, m: css` ${tokens.padding}: 1.25rem 1.5rem; @@ -78,8 +100,8 @@ export const config = { ${tokens.closeIconTop}: 0.75rem; ${tokens.closeIconRight}: 0.75rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -87,20 +109,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; ${tokens.titlePaddingRight}: 1.75rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -112,8 +134,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -121,20 +143,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.titleFontFamily}: ${textS.fontFamily}; + ${tokens.titleFontSize}: ${textS.fontSize}; + ${tokens.titleFontStyle}: ${textS.fontStyle}; + ${tokens.titleFontWeight}: ${textSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; + ${tokens.titleLineHeight}: ${textS.lineHeight}; ${tokens.titlePaddingRight}: 1.625rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.textFontFamily}: ${textS.fontFamily}; + ${tokens.textFontSize}: ${textS.fontSize}; + ${tokens.textFontStyle}: ${textS.fontStyle}; + ${tokens.textFontWeight}: ${textS.fontWeight}; + ${tokens.textLetterSpacing}: ${textS.letterSpacing}; + ${tokens.textLineHeight}: ${textS.lineHeight}; `, xs: css` ${tokens.padding}: 0.75rem 1rem; @@ -146,8 +168,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1rem; ${tokens.closeIconButtonSize}: 1rem; @@ -155,20 +177,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.titleFontFamily}: ${textXS.fontFamily}; + ${tokens.titleFontSize}: ${textXS.fontSize}; + ${tokens.titleFontStyle}: ${textXS.fontStyle}; + ${tokens.titleFontWeight}: ${textXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.titleLineHeight}: ${textXS.lineHeight}; ${tokens.titlePaddingRight}: 1.5rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.textFontFamily}: ${textXS.fontFamily}; + ${tokens.textFontSize}: ${textXS.fontSize}; + ${tokens.textFontStyle}: ${textXS.fontStyle}; + ${tokens.textFontWeight}: ${textXS.fontWeight}; + ${tokens.textLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.textLineHeight}: ${textXS.lineHeight}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Notification/Notification.config.ts b/packages/sdds-sbcom/src/components/Notification/Notification.config.ts index 3963e77e1e2..bb89f0338e9 100644 --- a/packages/sdds-sbcom/src/components/Notification/Notification.config.ts +++ b/packages/sdds-sbcom/src/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +20,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +52,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +106,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +160,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +214,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +268,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/sdds-sbcom/src/components/NumberInput/NumberInput.config.ts b/packages/sdds-sbcom/src/components/NumberInput/NumberInput.config.ts index e55e70fd713..04d2f8cb2eb 100644 --- a/packages/sdds-sbcom/src/components/NumberInput/NumberInput.config.ts +++ b/packages/sdds-sbcom/src/components/NumberInput/NumberInput.config.ts @@ -1,3 +1,40 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseSurfaceTransparentSecondary, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextTertiary, + onDarkSurfaceTransparentSecondary, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextTertiary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,26 +47,26 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-solid-default); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${inverseSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceSolidDefault}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -37,26 +74,26 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, secondary: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.iconButtonColorSolidActive}: var(--text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -64,27 +101,27 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, accent: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--inverse-text-primary); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--on-dark-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--on-dark-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-accent); - - ${tokens.iconButtonColor}: var(--on-dark-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-accent); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${inverseTextPrimary}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${onDarkTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${onDarkTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${onDarkSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceAccent}; + + ${tokens.iconButtonColor}: ${onDarkTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${onDarkTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${onDarkTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -92,25 +129,25 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, clear: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; ${tokens.backgroundColorSolid}: transparent; - ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonColor}: ${textPrimary}; ${tokens.iconButtonBackgroundColor}: transparent; - ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; ${tokens.iconButtonBackgroundColorHover}: transparent; - ${tokens.iconButtonColorActive}: var(--text-primary-active); + ${tokens.iconButtonColorActive}: ${textPrimaryActive}; ${tokens.iconButtonBackgroundColorActive}: transparent; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -125,12 +162,12 @@ export const config = { ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${tokens.iconButtonRadius}: 0.875rem; ${tokens.iconButtonSegmentationRadius}: 0.375rem; @@ -140,12 +177,12 @@ export const config = { ${tokens.textWrapperHeight}: 3.5rem; ${tokens.textWrapperPadding}: 1.063rem 1.125rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -157,12 +194,12 @@ export const config = { ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -172,12 +209,12 @@ export const config = { ${tokens.textWrapperHeight}: 3rem; ${tokens.textWrapperPadding}: 0.875rem 1rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -189,12 +226,12 @@ export const config = { ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 1rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.625rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -204,12 +241,12 @@ export const config = { ${tokens.textWrapperHeight}: 2.5rem; ${tokens.textWrapperPadding}: 0.688rem 0.875rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -221,12 +258,12 @@ export const config = { ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.75rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${tokens.iconButtonRadius}: 0.5rem; ${tokens.iconButtonSegmentationRadius}: 0.125rem; @@ -236,12 +273,12 @@ export const config = { ${tokens.textWrapperHeight}: 2rem; ${tokens.textWrapperPadding}: 0.563rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -257,8 +294,8 @@ export const config = { }, inputBackgroundType: { fill: css` - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimary}; `, clear: css` ${tokens.backgroundColor}: transparent; diff --git a/packages/sdds-sbcom/src/components/Pagination/Pagination.config.ts b/packages/sdds-sbcom/src/components/Pagination/Pagination.config.ts index 5b9af725836..1c629089f2d 100644 --- a/packages/sdds-sbcom/src/components/Pagination/Pagination.config.ts +++ b/packages/sdds-sbcom/src/components/Pagination/Pagination.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,129 +39,129 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; ${paginationTokens.inputBorderColor}:transparent; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, }, size: { l: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-l-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-l-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-l-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-l-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyL.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyL.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyL.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyLBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyL.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyL.lineHeight}; ${paginationTokens.buttonHeight}: 3.5rem; ${paginationTokens.buttonWidth}: 3rem; @@ -167,12 +197,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, m: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; @@ -208,12 +238,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; @@ -249,12 +279,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, xs: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-xs-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-xs-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-xs-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyXS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyXS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyXS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyXSBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyXS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyXS.lineHeight}; ${paginationTokens.buttonHeight}: 2rem; ${paginationTokens.paginationInputWidth}: 2.5rem; diff --git a/packages/sdds-sbcom/src/components/Popover/Popover.config.ts b/packages/sdds-sbcom/src/components/Popover/Popover.config.ts index 2f9acaf14e8..ed04bbbd199 100644 --- a/packages/sdds-sbcom/src/components/Popover/Popover.config.ts +++ b/packages/sdds-sbcom/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Progress/Progress.config.ts b/packages/sdds-sbcom/src/components/Progress/Progress.config.ts index c81cf38a298..1553e926f10 100644 --- a/packages/sdds-sbcom/src/components/Progress/Progress.config.ts +++ b/packages/sdds-sbcom/src/components/Progress/Progress.config.ts @@ -1,3 +1,15 @@ +import { + surfaceAccent, + surfaceAccentGradient, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,44 +20,44 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, primary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, info: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-info); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceInfo}; + ${progressTokens.valueColor}: ${textTertiary}; `, success: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, error: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/sdds-sbcom/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/sdds-sbcom/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index 6a6449f99a4..e738bb8a2d2 100644 --- a/packages/sdds-sbcom/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/sdds-sbcom/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +70,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -63,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -76,12 +96,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -89,12 +109,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -102,12 +122,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -115,12 +135,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -128,12 +148,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Radiobox/Radiobox.config.ts b/packages/sdds-sbcom/src/components/Radiobox/Radiobox.config.ts index d5fc23d48b3..44e13149a29 100644 --- a/packages/sdds-sbcom/src/components/Radiobox/Radiobox.config.ts +++ b/packages/sdds-sbcom/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,18 +37,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,18 +60,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${radioboxTokens.margin}: 0; @@ -66,19 +82,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.625rem; ${radioboxTokens.contentTopOffset}: 0.0625rem; ${radioboxTokens.contentLeftOffset}: 0.75rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyL.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -86,74 +102,74 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${radioboxTokens.fillColor}: var(--text-primary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPrimary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${radioboxTokens.fillColor}: var(--text-secondary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textSecondary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${radioboxTokens.fillColor}: var(--text-tertiary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textTertiary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${radioboxTokens.fillColor}: var(--text-paragraph); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textParagraph}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${radioboxTokens.fillColor}: var(--text-positive); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPositive}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${radioboxTokens.fillColor}: var(--text-warning); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textWarning}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated negative: css` - ${radioboxTokens.fillColor}: var(--text-negative); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textNegative}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -164,7 +180,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Range/Range.clear.config.ts b/packages/sdds-sbcom/src/components/Range/Range.clear.config.ts index 53faca3d526..431cba42eda 100644 --- a/packages/sdds-sbcom/src/components/Range/Range.clear.config.ts +++ b/packages/sdds-sbcom/src/components/Range/Range.clear.config.ts @@ -1,3 +1,31 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -14,57 +42,57 @@ export const config = { ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); - - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldBackgroundColorHover}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -75,15 +103,15 @@ export const config = { ${tokens.textFieldBackgroundSuccessColorHover}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; `, }, size: { @@ -91,12 +119,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.5rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -104,24 +132,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -139,22 +167,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -168,12 +196,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -181,24 +209,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -216,22 +244,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -245,12 +273,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -258,24 +286,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -293,22 +321,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -322,12 +350,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -335,24 +363,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -370,22 +398,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -399,12 +427,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -412,24 +440,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -447,22 +475,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -475,10 +503,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -491,12 +519,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -515,12 +543,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -538,16 +566,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Range/Range.config.ts b/packages/sdds-sbcom/src/components/Range/Range.config.ts index af1793bb835..496d66656a1 100644 --- a/packages/sdds-sbcom/src/components/Range/Range.config.ts +++ b/packages/sdds-sbcom/src/components/Range/Range.config.ts @@ -1,3 +1,32 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,55 +39,55 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorHover}: var(--surface-transparent-negative-hover); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorHover}: var(--surface-transparent-positive-hover); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -66,12 +95,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -79,24 +108,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 4rem; @@ -114,22 +143,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -142,12 +171,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -155,24 +184,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -190,22 +219,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -218,12 +247,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -231,24 +260,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -266,22 +295,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -294,12 +323,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -307,24 +336,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -342,22 +371,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -370,12 +399,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -383,24 +412,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -418,22 +447,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -445,10 +474,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -461,12 +490,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -485,12 +514,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -508,16 +537,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Rating/Rating.config.ts b/packages/sdds-sbcom/src/components/Rating/Rating.config.ts index 79e9f36f886..975cdcc81fd 100644 --- a/packages/sdds-sbcom/src/components/Rating/Rating.config.ts +++ b/packages/sdds-sbcom/src/components/Rating/Rating.config.ts @@ -1,3 +1,36 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + bodyXXS, + bodyXXSBold, + dsplL, + dsplLBold, + dsplM, + dsplMBold, + dsplS, + dsplSBold, + h1, + h1Bold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +41,36 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; // TODO: change with token data-yellow, when it will be added to theme ${tokens.iconColor}: #F3A912; - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { l: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -48,19 +81,19 @@ export const config = { m: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -71,19 +104,19 @@ export const config = { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -94,19 +127,19 @@ export const config = { xs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.iconMarginBottom}: 0.125rem; ${tokens.contentGap}: 0.375rem; @@ -121,19 +154,19 @@ export const config = { xxs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.fontFamily}: ${bodyXXS.fontFamily}; + ${tokens.fontSize}: ${bodyXXS.fontSize}; + ${tokens.fontStyle}: ${bodyXXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.contentGap}: 0.375rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -146,19 +179,19 @@ export const config = { h1: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tokens.fontFamily}: ${h1.fontFamily}; + ${tokens.fontSize}: ${h1.fontSize}; + ${tokens.fontStyle}: ${h1.fontStyle}; + ${tokens.fontWeight}: ${h1Bold.fontWeight}; + ${tokens.letterSpacing}: ${h1.letterSpacing}; + ${tokens.lineHeight}: ${h1.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.helperTextFontFamily}: ${bodyM.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyM.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyM.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyM.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyM.lineHeight}; ${tokens.contentGap}: 1rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -177,19 +210,19 @@ export const config = { h2: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tokens.fontFamily}: ${h2.fontFamily}; + ${tokens.fontSize}: ${h2.fontSize}; + ${tokens.fontStyle}: ${h2.fontStyle}; + ${tokens.fontWeight}: ${h2Bold.fontWeight}; + ${tokens.letterSpacing}: ${h2.letterSpacing}; + ${tokens.lineHeight}: ${h2.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.875rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -208,19 +241,19 @@ export const config = { h3: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.fontFamily}: ${h3.fontFamily}; + ${tokens.fontSize}: ${h3.fontSize}; + ${tokens.fontStyle}: ${h3.fontStyle}; + ${tokens.fontWeight}: ${h3Bold.fontWeight}; + ${tokens.letterSpacing}: ${h3.letterSpacing}; + ${tokens.lineHeight}: ${h3.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.75rem; ${tokens.singleIconContentGap}: 0.375rem; @@ -239,19 +272,19 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.fontFamily}: ${h4.fontFamily}; + ${tokens.fontSize}: ${h4.fontSize}; + ${tokens.fontStyle}: ${h4.fontStyle}; + ${tokens.fontWeight}: ${h4Bold.fontWeight}; + ${tokens.letterSpacing}: ${h4.letterSpacing}; + ${tokens.lineHeight}: ${h4.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -270,19 +303,19 @@ export const config = { h5: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.fontFamily}: ${h5.fontFamily}; + ${tokens.fontSize}: ${h5.fontSize}; + ${tokens.fontStyle}: ${h5.fontStyle}; + ${tokens.fontWeight}: ${h5Bold.fontWeight}; + ${tokens.letterSpacing}: ${h5.letterSpacing}; + ${tokens.lineHeight}: ${h5.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -301,19 +334,19 @@ export const config = { h6: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tokens.fontFamily}: ${h6.fontFamily}; + ${tokens.fontSize}: ${h6.fontSize}; + ${tokens.fontStyle}: ${h6.fontStyle}; + ${tokens.fontWeight}: ${h6Bold.fontWeight}; + ${tokens.letterSpacing}: ${h6.letterSpacing}; + ${tokens.lineHeight}: ${h6.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -332,19 +365,19 @@ export const config = { displayL: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${tokens.fontFamily}: ${dsplL.fontFamily}; + ${tokens.fontSize}: ${dsplL.fontSize}; + ${tokens.fontStyle}: ${dsplL.fontStyle}; + ${tokens.fontWeight}: ${dsplLBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplL.letterSpacing}; + ${tokens.lineHeight}: ${dsplL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.helperTextFontFamily}: ${h3.fontFamily}; + ${tokens.helperTextFontSize}: ${h3.fontSize}; + ${tokens.helperTextFontStyle}: ${h3.fontStyle}; + ${tokens.helperTextFontWeight}: ${h3.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing}; + ${tokens.helperTextLineHeight}: ${h3.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -363,19 +396,19 @@ export const config = { displayM: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${tokens.fontFamily}: ${dsplM.fontFamily}; + ${tokens.fontSize}: ${dsplM.fontSize}; + ${tokens.fontStyle}: ${dsplM.fontStyle}; + ${tokens.fontWeight}: ${dsplMBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplM.letterSpacing}; + ${tokens.lineHeight}: ${dsplM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -394,19 +427,19 @@ export const config = { displayS: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${dsplS.fontFamily}; + ${tokens.fontSize}: ${dsplS.fontSize}; + ${tokens.fontStyle}: ${dsplS.fontStyle}; + ${tokens.fontWeight}: ${dsplSBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplS.letterSpacing}; + ${tokens.lineHeight}: ${dsplS.lineHeight}; + + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; diff --git a/packages/sdds-sbcom/src/components/Scrollbar/Scrollbar.config.ts b/packages/sdds-sbcom/src/components/Scrollbar/Scrollbar.config.ts index 0220aa026dc..25f11d4607a 100644 --- a/packages/sdds-sbcom/src/components/Scrollbar/Scrollbar.config.ts +++ b/packages/sdds-sbcom/src/components/Scrollbar/Scrollbar.config.ts @@ -1,8 +1,10 @@ +import { surfaceTransparentPrimary, surfaceTransparentTertiary } from '@salutejs/sdds-themes/tokens/sdds_sbcom'; + export const config = { view: { default: { - trackColor: 'var(--surface-transparent-primary)', - thumbColor: 'var(--surface-transparent-tertiary)', + trackColor: surfaceTransparentPrimary, + thumbColor: surfaceTransparentTertiary, }, }, size: { diff --git a/packages/sdds-sbcom/src/components/Segment/SegmentGroup.config.ts b/packages/sdds-sbcom/src/components/Segment/SegmentGroup.config.ts index b03cb7140c7..259a3728449 100644 --- a/packages/sdds-sbcom/src/components/Segment/SegmentGroup.config.ts +++ b/packages/sdds-sbcom/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +9,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -74,7 +75,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary}; `, }, orientation: { diff --git a/packages/sdds-sbcom/src/components/Segment/SegmentItem.config.ts b/packages/sdds-sbcom/src/components/Segment/SegmentItem.config.ts index 550c948b39d..1e9ce55f16f 100644 --- a/packages/sdds-sbcom/src/components/Segment/SegmentItem.config.ts +++ b/packages/sdds-sbcom/src/components/Segment/SegmentItem.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,68 +32,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -83,12 +107,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${segmentTokens.itemBorderRadius}: 0.625rem; @@ -100,12 +124,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -117,12 +141,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, l: css` ${segmentTokens.itemBorderRadius}: 0.875rem; @@ -134,12 +158,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, xl: css` ${segmentTokens.itemBorderRadius}: 1rem; @@ -151,12 +175,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-sbcom/src/components/Select/Select.config.ts b/packages/sdds-sbcom/src/components/Select/Select.config.ts index 8522cb0d6c0..2d33490dcc4 100644 --- a/packages/sdds-sbcom/src/components/Select/Select.config.ts +++ b/packages/sdds-sbcom/src/components/Select/Select.config.ts @@ -1,3 +1,75 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + onLightTextSecondaryActive, + onLightTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,348 +82,348 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, accent: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-accent); - ${tokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-accent-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceAccent}; + ${tokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, secondary: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, clear: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-active); - ${tokens.buttonBackgroundColor}: var(--surface-clear); - ${tokens.buttonBackgroundColorHover}: var(--surface-clear); - ${tokens.buttonBackgroundColorActive}: var(--surface-clear); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryActive}; + ${tokens.buttonBackgroundColor}: ${surfaceClear}; + ${tokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${tokens.buttonBackgroundColorActive}: ${surfaceClear}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, dark: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-transparent-deep); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceTransparentDeep}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceTransparentDeepHover}; + ${tokens.buttonBackgroundColorActive}:${onLightSurfaceTransparentDeepActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, black: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, white: css` - ${tokens.buttonColor}: var(--on-light-text-primary); - ${tokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-light-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-light-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-light-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-light-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-dark-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); - - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); + ${tokens.buttonColor}: ${onLightTextPrimary}; + ${tokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onLightTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onLightTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onLightTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onLightTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onDarkSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onDarkSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}:${onDarkSurfaceSolidDefaultActive}; + + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -371,20 +443,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -392,12 +464,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -420,12 +492,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; ${tokens.targetHeight}: 3.5rem; @@ -451,19 +523,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -496,20 +568,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -517,12 +589,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -545,12 +617,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -576,19 +648,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -621,20 +693,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -642,12 +714,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -670,12 +742,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; @@ -701,19 +773,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -746,20 +818,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -767,12 +839,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -795,12 +867,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2rem; @@ -826,19 +898,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -858,69 +930,69 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--on-dark-text-primary); - ${tokens.textFieldChipColorHover}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${onDarkTextPrimary}; + ${tokens.textFieldChipColorHover}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -933,12 +1005,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -957,12 +1029,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -982,12 +1054,12 @@ export const config = { true: css` ${tokens.disclosureIconOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-sbcom/src/components/Skeleton/LineSkeleton.config.ts index 75d2ee7a606..0937735fdb6 100644 --- a/packages/sdds-sbcom/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-sbcom/src/components/Skeleton/LineSkeleton.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + dsplL, + dsplM, + dsplS, + h1, + h2, + h3, + h4, + h5, + h6, + surfaceSkeletonDeepGradient, + surfaceSkeletonGradient, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textL, + textM, + textS, + textXS, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, skeletonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,88 +32,88 @@ export const config = { variations: { view: { default: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient, var(--surface-skeleton-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, lighter: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient-lighter, var(--surface-skeleton-deep-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonDeepGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, }, size: { bodyL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size); + ${skeletonTokens.lineHeight}: ${bodyL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyL.fontSize}; `, bodyM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size); + ${skeletonTokens.lineHeight}: ${bodyM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyM.fontSize}; `, bodyS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size); + ${skeletonTokens.lineHeight}: ${bodyS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyS.fontSize}; `, bodyXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXS.fontSize}; `, bodyXXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXXS.fontSize}; `, dsplL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size); + ${skeletonTokens.lineHeight}: ${dsplL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplL.fontSize}; `, dsplM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size); + ${skeletonTokens.lineHeight}: ${dsplM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplM.fontSize}; `, dsplS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size); + ${skeletonTokens.lineHeight}: ${dsplS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplS.fontSize}; `, h1: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size); + ${skeletonTokens.lineHeight}: ${h1.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h1.fontSize}; `, h2: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size); + ${skeletonTokens.lineHeight}: ${h2.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h2.fontSize}; `, h3: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size); + ${skeletonTokens.lineHeight}: ${h3.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h3.fontSize}; `, h4: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size); + ${skeletonTokens.lineHeight}: ${h4.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h4.fontSize}; `, h5: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); + ${skeletonTokens.lineHeight}: ${h5.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h5.fontSize}; `, h6: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + ${skeletonTokens.lineHeight}: ${h6.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h6.fontSize}; `, textL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); + ${skeletonTokens.lineHeight}: ${textL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textL.fontSize}; `, textM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size); + ${skeletonTokens.lineHeight}: ${textM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textM.fontSize}; `, textS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size); + ${skeletonTokens.lineHeight}: ${textS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textS.fontSize}; `, textXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size); + ${skeletonTokens.lineHeight}: ${textXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textXS.fontSize}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Slider/Slider.config.ts b/packages/sdds-sbcom/src/components/Slider/Slider.config.ts index c171f134490..d38cdfcbc62 100644 --- a/packages/sdds-sbcom/src/components/Slider/Slider.config.ts +++ b/packages/sdds-sbcom/src/components/Slider/Slider.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + surfaceAccent, + surfaceAccentGradient, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +25,70 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, gradient: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent-gradient); + ${sliderTokens.fillColor}: ${surfaceAccentGradient}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, }, size: { @@ -85,24 +102,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -119,12 +136,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -136,24 +153,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -170,12 +187,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -187,24 +204,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -221,12 +238,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-sbcom/src/components/Steps/Steps.config.ts b/packages/sdds-sbcom/src/components/Steps/Steps.config.ts index ee1ee5e1e98..d1243d61ddd 100644 --- a/packages/sdds-sbcom/src/components/Steps/Steps.config.ts +++ b/packages/sdds-sbcom/src/components/Steps/Steps.config.ts @@ -1,42 +1,72 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -47,10 +77,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -60,26 +90,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -100,33 +130,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.5rem; ${tokens.largeBulletIndentHeight}: 1.25rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyL.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyM.fontFamily}; + ${tokens.contentFontSize}: ${bodyM.fontSize}; + ${tokens.contentFontStyle}: ${bodyM.fontStyle}; + ${tokens.contentFontWeight}: ${bodyM.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyM.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -147,33 +177,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -194,33 +224,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -241,33 +271,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 0.75rem; ${tokens.largeBulletIndentHeight}: 0.5rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -278,8 +308,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/sdds-sbcom/src/components/Switch/Switch.config.ts b/packages/sdds-sbcom/src/components/Switch/Switch.config.ts index 8a08bd686d8..f5304e72218 100644 --- a/packages/sdds-sbcom/src/components/Switch/Switch.config.ts +++ b/packages/sdds-sbcom/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,50 +24,50 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -83,17 +96,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -104,7 +117,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Table/Table.config.ts b/packages/sdds-sbcom/src/components/Table/Table.config.ts index 770fa22b6d8..74453ee1919 100644 --- a/packages/sdds-sbcom/src/components/Table/Table.config.ts +++ b/packages/sdds-sbcom/src/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + surfaceTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +28,12 @@ export const config = { }, size: { l: css` - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.headerRowHeight}: 3.125rem; ${tokens.rowHeight}: 3.125rem; @@ -31,9 +43,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.5rem; ${tokens.editableCellIconButtonWidth}: 3rem; @@ -42,18 +54,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.875rem; ${tokens.editableCellInputPadding}: 0 0.75rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.75rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.875rem; @@ -63,12 +75,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -76,20 +88,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.5rem 0.875rem; ${tokens.selectControlPanelGap}: 0.5rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight}; `, m: css` - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.headerRowHeight}: 2.75rem; ${tokens.rowHeight}: 2.75rem; @@ -99,9 +111,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.375rem; ${tokens.editableCellIconButtonWidth}: 2.5rem; @@ -110,18 +122,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.625rem; ${tokens.editableCellInputPadding}: 0 0.625rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.75rem; @@ -131,12 +143,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -144,20 +156,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.75rem; ${tokens.selectControlPanelGap}: 0.625rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, s: css` - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.headerRowHeight}: 2.125rem; ${tokens.rowHeight}: 2.125rem; @@ -167,9 +179,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.25rem; ${tokens.editableCellIconButtonWidth}: 2rem; @@ -178,18 +190,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.5rem; ${tokens.editableCellInputPadding}: 0 0.375rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.25rem 0.5rem; ${tokens.buttonHeight}: 1.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.625rem; @@ -199,12 +211,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.25rem 0 0; ${tokens.selectItemIconSize}: 1rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 0.875rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -212,12 +224,12 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.5rem; ${tokens.selectControlPanelGap}: 0.25rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 8b2e20b8ce7..2fc3b2dabef 100644 --- a/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,13 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,78 +18,78 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; diff --git a/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index f70368f502f..e06f2e2440d 100644 --- a/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h1, + h2, + h3, + h4, + h5, + h6, + inverseTextPrimary, + inverseTextSecondary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,106 +34,106 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -123,12 +149,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -142,12 +168,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -161,12 +187,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -180,12 +206,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -197,12 +223,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tabsTokens.fontFamily}: ${h6.fontFamily}; + ${tabsTokens.fontSize}: ${h6.fontSize}; + ${tabsTokens.fontStyle}: ${h6.fontStyle}; + ${tabsTokens.fontWeight}: ${h6.fontWeight}; + ${tabsTokens.letterSpacing}: ${h6.letterSpacing}; + ${tabsTokens.lineHeight}: ${h6.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -214,12 +240,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -231,12 +257,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -248,12 +274,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -265,12 +291,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -282,12 +308,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts index bc3e5edf5c1..9be836b83e8 100644 --- a/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +16,36 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-sbcom/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/sdds-sbcom/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index c1b4b62e4a1..082ade23ef0 100644 --- a/packages/sdds-sbcom/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/sdds-sbcom/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/sdds-sbcom/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-sbcom/src/components/Tabs/vertical/VerticalTabItem.config.ts index c819eeeacbd..553acd79c35 100644 --- a/packages/sdds-sbcom/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-sbcom/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +24,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +65,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -69,12 +85,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -89,12 +105,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -109,12 +125,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/sdds-sbcom/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/sdds-sbcom/src/components/Tabs/vertical/VerticalTabs.config.ts index 78eba3f047c..ae33ca601fd 100644 --- a/packages/sdds-sbcom/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/sdds-sbcom/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-sbcom/src/components/TextArea/TextArea.clear.config.ts b/packages/sdds-sbcom/src/components/TextArea/TextArea.clear.config.ts index 87abb38a0d7..1244bda3c74 100644 --- a/packages/sdds-sbcom/src/components/TextArea/TextArea.clear.config.ts +++ b/packages/sdds-sbcom/src/components/TextArea/TextArea.clear.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -19,31 +42,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` ${tokens.inputBackgroundColor}: transparent; @@ -56,31 +79,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-positive); - ${tokens.inputColorFocus}: var(--text-positive); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPositive}; + ${tokens.inputColorFocus}: ${textPositive}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` ${tokens.inputBackgroundColor}: transparent; @@ -93,31 +116,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-warning); - ${tokens.inputColorFocus}: var(--text-warning); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textWarning}; + ${tokens.inputColorFocus}: ${textWarning}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` ${tokens.inputBackgroundColor}: transparent; @@ -130,31 +153,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-negative); - ${tokens.inputColorFocus}: var(--text-negative); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textNegative}; + ${tokens.inputColorFocus}: ${textNegative}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -184,30 +207,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -225,12 +248,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -258,30 +281,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -299,12 +322,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -332,30 +355,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -373,12 +396,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -406,30 +429,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -447,12 +470,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -480,30 +503,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -521,24 +544,24 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; ${tokens.tooltipBoxShadow}: var( --shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08) ); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -551,12 +574,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -575,12 +598,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -598,9 +621,9 @@ export const config = { }, readOnly: { true: css` - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-sbcom/src/components/TextArea/TextArea.config.ts b/packages/sdds-sbcom/src/components/TextArea/TextArea.config.ts index 9a056369045..635eca04569 100644 --- a/packages/sdds-sbcom/src/components/TextArea/TextArea.config.ts +++ b/packages/sdds-sbcom/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,41 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,172 +46,172 @@ export const config = { variations: { view: { default: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-primary); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-primary); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-positive); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-positive); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-positive); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textPositive}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-warning); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-warning); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-warning); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textWarning}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-negative); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-negative); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -202,30 +240,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -243,12 +281,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.751rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -275,30 +313,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -316,12 +354,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -348,30 +386,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -391,12 +429,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -423,30 +461,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.5rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +502,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -496,30 +534,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.375rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -537,20 +575,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -563,12 +601,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -587,12 +625,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -606,18 +644,18 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/TextField/TextField.clear.config.ts b/packages/sdds-sbcom/src/components/TextField/TextField.clear.config.ts index 31d1a8122e8..84943665e6b 100644 --- a/packages/sdds-sbcom/src/components/TextField/TextField.clear.config.ts +++ b/packages/sdds-sbcom/src/components/TextField/TextField.clear.config.ts @@ -1,3 +1,52 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,132 +58,132 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-positive); + ${tokens.color}: ${textPositive}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-positive); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textPositive}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-positive); - ${tokens.contentSlotColorHover}: var(--text-positive-hover); - ${tokens.contentSlotColorActive}: var(--text-positive-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPositive}; + ${tokens.contentSlotColorHover}: ${textPositiveHover}; + ${tokens.contentSlotColorActive}: ${textPositiveActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-warning); + ${tokens.color}: ${textWarning}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-warning); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textWarning}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-warning); - ${tokens.contentSlotColorHover}: var(--text-warning-hover); - ${tokens.contentSlotColorActive}: var(--text-warning-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textWarning}; + ${tokens.contentSlotColorHover}: ${textWarningHover}; + ${tokens.contentSlotColorActive}: ${textWarningActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-negative); + ${tokens.color}: ${textNegative}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-negative); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textNegative}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -151,40 +200,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -200,19 +249,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -235,40 +284,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -283,12 +332,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -311,40 +360,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -359,12 +408,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -387,40 +436,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -435,12 +484,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -463,40 +512,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -511,12 +560,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -529,126 +578,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -661,12 +710,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -685,12 +734,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -709,13 +758,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); + ${tokens.colorReadOnly}: ${textPrimary}; ${tokens.backgroundColorReadOnly}: transparent; - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-sbcom/src/components/TextField/TextField.config.ts b/packages/sdds-sbcom/src/components/TextField/TextField.config.ts index c029fa0c4a6..a5199e1c971 100644 --- a/packages/sdds-sbcom/src/components/TextField/TextField.config.ts +++ b/packages/sdds-sbcom/src/components/TextField/TextField.config.ts @@ -1,3 +1,56 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,120 +62,120 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-positive); - ${tokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPositive}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-warning); - ${tokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentWarning}; + ${tokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -135,40 +188,40 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -184,19 +237,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -219,20 +272,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -240,20 +293,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -266,12 +319,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -297,20 +350,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -318,20 +371,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -344,12 +397,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -375,20 +428,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -396,20 +449,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -422,12 +475,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -453,20 +506,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -474,20 +527,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -500,12 +553,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -520,126 +573,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -652,12 +705,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -676,12 +729,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -700,13 +753,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-sbcom/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/sdds-sbcom/src/components/TextFieldGroup/TextFieldGroup.config.ts index 200d2e26ac4..ea3c24367cb 100644 --- a/packages/sdds-sbcom/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/sdds-sbcom/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.textFieldDefaultRadius}: 0.75rem; @@ -77,28 +78,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -111,12 +112,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -133,28 +134,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -167,12 +168,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.textFieldSegmentedRadius}: 0.125rem; @@ -189,28 +190,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -223,12 +224,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-sbcom/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts b/packages/sdds-sbcom/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts index a33164279df..e6e3a7461b7 100644 --- a/packages/sdds-sbcom/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts +++ b/packages/sdds-sbcom/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + textAccent, + textNegative, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,10 +35,10 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -25,45 +51,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -76,45 +102,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-positive); - ${tokens.textFieldContentSlotColorHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColor}: ${textPositive}; + ${tokens.textFieldContentSlotColorHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorActive}: ${textPositiveActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-positive); + ${tokens.scaleValueColor}: ${textPositive}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -127,45 +153,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -178,50 +204,50 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-negative); + ${tokens.scaleValueColor}: ${textNegative}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -235,38 +261,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -288,12 +314,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -305,38 +331,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -358,12 +384,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -375,38 +401,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -428,12 +454,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -445,38 +471,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -498,12 +524,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -515,38 +541,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -568,20 +594,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -594,12 +620,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -618,12 +644,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -641,12 +667,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-sbcom/src/components/TextFieldSlider/TextFieldSlider.config.ts b/packages/sdds-sbcom/src/components/TextFieldSlider/TextFieldSlider.config.ts index c63635d3490..529b7b02f77 100644 --- a/packages/sdds-sbcom/src/components/TextFieldSlider/TextFieldSlider.config.ts +++ b/packages/sdds-sbcom/src/components/TextFieldSlider/TextFieldSlider.config.ts @@ -1,3 +1,35 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,207 +41,207 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; - ${tokens.textFieldBorderColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldBorderColorHover}: var(--text-secondary); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldBorderColorHover}: ${textSecondary}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-positive-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-warning-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -223,38 +255,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -276,12 +308,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -293,38 +325,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -346,12 +378,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -363,38 +395,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -416,12 +448,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -433,38 +465,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -486,12 +518,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -503,38 +535,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -556,20 +588,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -582,12 +614,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -606,12 +638,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -629,12 +661,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-sbcom/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-sbcom/src/components/TimePicker/TimePicker.config.ts index b86cc9da0bd..4461b541e55 100644 --- a/packages/sdds-sbcom/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-sbcom/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,45 +33,45 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; - ${tokens.labelColor}: var(--text-primary); + ${tokens.labelColor}: ${textPrimary}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); + ${tokens.timePickerShadow}: ${shadowDownSoftS}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -63,12 +86,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -80,12 +103,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -103,34 +126,34 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.5rem; @@ -146,12 +169,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -163,12 +186,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -186,34 +209,34 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -229,12 +252,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -246,12 +269,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -269,34 +292,34 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.813rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -312,12 +335,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -329,12 +352,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -352,34 +375,34 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -450,13 +473,13 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Toast/Toast.config.ts b/packages/sdds-sbcom/src/components/Toast/Toast.config.ts index 9678f1dd594..ca5876de428 100644 --- a/packages/sdds-sbcom/src/components/Toast/Toast.config.ts +++ b/packages/sdds-sbcom/src/components/Toast/Toast.config.ts @@ -1,3 +1,17 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,49 +23,49 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-positive); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textPositive}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-negative); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textNegative}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary); + ${toastTokens.closeIconColor}: ${onDarkTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary); + ${toastTokens.closeIconColor}: ${onLightTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextSecondary}; `, }, size: { @@ -59,12 +73,12 @@ export const config = { ${toastTokens.borderRadius}: 0.75rem; ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/sdds-sbcom/src/components/Toolbar/Toolbar.config.ts b/packages/sdds-sbcom/src/components/Toolbar/Toolbar.config.ts index 89581b0d6bf..6dc75c74f09 100644 --- a/packages/sdds-sbcom/src/components/Toolbar/Toolbar.config.ts +++ b/packages/sdds-sbcom/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/sdds-sbcom/src/components/Tooltip/Tooltip.config.ts b/packages/sdds-sbcom/src/components/Tooltip/Tooltip.config.ts index 2ca59cef4c5..b84b4df97d3 100644 --- a/packages/sdds-sbcom/src/components/Tooltip/Tooltip.config.ts +++ b/packages/sdds-sbcom/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,4 @@ +import { bodyS, bodyXS, surfaceSolidCardBrightness, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +17,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -30,7 +31,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -41,12 +42,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -55,15 +56,15 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.color}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Tree/Tree.config.ts b/packages/sdds-sbcom/src/components/Tree/Tree.config.ts index e8cbfce73a6..41676c37310 100644 --- a/packages/sdds-sbcom/src/components/Tree/Tree.config.ts +++ b/packages/sdds-sbcom/src/components/Tree/Tree.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,24 +24,24 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -53,12 +69,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.itemHeight}: 3.5rem; @@ -84,12 +100,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.itemHeight}: 3rem; @@ -115,12 +131,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -146,12 +162,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.itemHeight}: 2rem; @@ -177,12 +193,12 @@ export const config = { ${tokens.checkboxInnerSize}: 0.875rem; ${tokens.checkboxBorderRadius}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Typography/Body.config.ts b/packages/sdds-sbcom/src/components/Typography/Body.config.ts index d2bbd7fd257..dcdff3926bb 100644 --- a/packages/sdds-sbcom/src/components/Typography/Body.config.ts +++ b/packages/sdds-sbcom/src/components/Typography/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,15 +24,15 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; ${typographyTokens.typoFontWeightExtraBold}: 700; - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -28,15 +45,15 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; ${typographyTokens.typoFontWeightExtraBold}: 700; - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -49,15 +66,15 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; ${typographyTokens.typoFontWeightExtraBold}: 700; - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -70,15 +87,15 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; ${typographyTokens.typoFontWeightExtraBold}: 700; - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -91,15 +108,15 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; ${typographyTokens.typoFontWeightExtraBold}: 700; - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Typography/Dspl.config.ts b/packages/sdds-sbcom/src/components/Typography/Dspl.config.ts index 3cc2d7eea42..0a83069a024 100644 --- a/packages/sdds-sbcom/src/components/Typography/Dspl.config.ts +++ b/packages/sdds-sbcom/src/components/Typography/Dspl.config.ts @@ -1,3 +1,4 @@ +import { dsplS, dsplSBold, dsplSMedium } from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configS = { @@ -7,15 +8,15 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; ${typographyTokens.typoFontWeightExtraBold}: 700; - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Typography/Heading.config.ts b/packages/sdds-sbcom/src/components/Typography/Heading.config.ts index 19261642346..768365eb470 100644 --- a/packages/sdds-sbcom/src/components/Typography/Heading.config.ts +++ b/packages/sdds-sbcom/src/components/Typography/Heading.config.ts @@ -1,3 +1,17 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, +} from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configH1 = { @@ -7,15 +21,15 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; ${typographyTokens.typoFontWeightExtraBold}: 700; - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -27,15 +41,15 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; ${typographyTokens.typoFontWeightExtraBold}: 700; - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -47,15 +61,15 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; ${typographyTokens.typoFontWeightExtraBold}: 700; - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -67,15 +81,15 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; ${typographyTokens.typoFontWeightExtraBold}: 700; - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, From 826cfe3c9e871388ee7515ade702d15f1bf2115a Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 20:07:53 +0300 Subject: [PATCH 06/24] chore(plasma-b2c): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 297 ++--- .../src/components/Attach/Attach.config.ts | 899 +++++++------- .../Autocomplete/Autocomplete.config.ts | 553 +++++---- .../src/components/Badge/Badge.config.ts | 148 ++- .../Breadcrumbs/Breadcrumbs.config.ts | 68 +- .../src/components/Button/Button.config.ts | 272 +++-- .../ButtonGroup/ButtonGroup.config.ts | 318 ++--- .../components/Calendar/Calendar.config.ts | 460 ++++---- .../Calendar/CalendarDouble.config.ts | 460 ++++---- .../components/Carousel/Carousel.config.ts | 24 +- .../src/components/Cell/Cell.config.ts | 169 +-- .../components/Checkbox/Checkbox.config.ts | 164 +-- .../components/ChipGroup/ChipGroup.config.ts | 102 +- .../components/CodeField/CodeField.config.ts | 85 +- .../components/Combobox/Combobox.config.ts | 753 ++++++------ .../Combobox/Legacy/Combobox.config.ts | 267 +++-- .../src/components/Counter/Counter.config.ts | 103 +- .../DatePicker/DatePicker.clear.config.ts | 1035 ++++++++-------- .../DatePicker/DatePicker.config.ts | 1022 ++++++++-------- .../DateTimePicker/DateTimePicker.config.ts | 954 ++++++++------- .../src/components/Divider/Divider.config.ts | 14 +- .../src/components/Drawer/Drawer.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 132 ++- .../Dropdown/components/DropdownOld.config.ts | 63 +- .../components/Dropzone/Dropzone.config.ts | 53 +- .../components/Editable/Editable.config.ts | 17 +- .../EmbedIconButton/EmbedIconButton.config.ts | 125 +- .../EmptyState/EmptyState.config.ts | 49 +- .../src/components/File/File.config.ts | 158 +-- .../IconButton/IconButton.config.ts | 182 +-- .../InformationWrapper.config.ts | 295 ++--- .../LinkButton/LinkButton.config.ts | 210 ++-- .../src/components/List/List.config.ts | 77 +- .../src/components/Loader/Loader.config.ts | 181 +-- .../src/components/ModalBase/Modal.config.ts | 23 +- .../src/components/Note/Note.config.ts | 164 +-- .../Notification/Notification.config.ts | 197 ++-- .../NumberInput/NumberInput.config.ts | 289 +++-- .../Pagination/Pagination.config.ts | 270 +++-- .../src/components/Popover/Popover.config.ts | 5 +- .../components/Progress/Progress.config.ts | 60 +- .../ProgressBarCircular.config.ts | 146 ++- .../components/Radiobox/Radiobox.config.ts | 162 +-- .../components/Range/Range.clear.config.ts | 484 ++++---- .../src/components/Range/Range.config.ts | 467 ++++---- .../src/components/Rating/Rating.config.ts | 385 +++--- .../components/Segment/SegmentGroup.config.ts | 11 +- .../components/Segment/SegmentItem.config.ts | 168 +-- .../src/components/Select/Select.config.ts | 1046 +++++++++-------- .../src/components/Slider/Slider.config.ts | 209 ++-- .../src/components/Spinner/Spinner.config.ts | 28 +- .../src/components/Steps/Steps.config.ts | 328 +++--- .../src/components/Switch/Switch.config.ts | 103 +- .../src/components/Table/Table.config.ts | 180 +-- .../HorizontalIconTabItem.config.ts | 70 +- .../horizontal/HorizontalTabItem.config.ts | 258 ++-- .../Tabs/horizontal/HorizontalTabs.config.ts | 36 +- .../vertical/VerticalIconTabItem.config.ts | 23 +- .../Tabs/vertical/VerticalTabItem.config.ts | 90 +- .../Tabs/vertical/VerticalTabs.config.ts | 17 +- .../TextArea/TextArea.clear.config.ts | 479 ++++---- .../components/TextArea/TextArea.config.ts | 722 ++++++------ .../TextField/TextField.clear.config.ts | 789 +++++++------ .../components/TextField/TextField.config.ts | 811 +++++++------ .../TextFieldGroup/TextFieldGroup.config.ts | 193 +-- .../TextFieldSlider.clear.config.ts | 606 +++++----- .../TextFieldSlider/TextFieldSlider.config.ts | 658 ++++++----- .../TimePicker/TimePicker.config.ts | 331 +++--- .../src/components/Toast/Toast.config.ts | 78 +- .../src/components/Toolbar/Toolbar.config.ts | 11 +- .../src/components/Tooltip/Tooltip.config.ts | 33 +- .../src/components/Tree/Tree.config.ts | 106 +- .../src/components/Typography/Body.config.ts | 97 +- .../src/components/Typography/Dspl.config.ts | 59 +- .../components/Typography/Heading.config.ts | 116 +- .../src/components/Typography/Text.config.ts | 78 +- 76 files changed, 10859 insertions(+), 9250 deletions(-) diff --git a/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts b/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts index 6f3fa4f9cab..8e31f1a92de 100644 --- a/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts +++ b/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,30 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,12 +38,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorder}: none; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); @@ -25,12 +52,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-transparent-primary); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceTransparentPrimary}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorder}: none; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); @@ -40,29 +67,29 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorder}: 0.063rem solid var(--surface-transparent-secondary); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-transparent-secondary); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorder}: 0.063rem solid ${surfaceTransparentSecondary}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceTransparentSecondary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, clear: css` ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorder}: none; - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -73,19 +100,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.875rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyLBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -93,19 +120,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -113,19 +140,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -133,19 +160,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXSBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.lineHeight}; `, h2: css` ${accordionTokens.accordionItemPaddingVertical}: 1rem; @@ -154,19 +181,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h2Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -175,19 +202,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 0.688rem; @@ -195,19 +222,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h5: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -215,19 +242,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h6: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -235,19 +262,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h6Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, stretching: { diff --git a/packages/plasma-b2c/src/components/Attach/Attach.config.ts b/packages/plasma-b2c/src/components/Attach/Attach.config.ts index b62ab061eec..f44c5323652 100644 --- a/packages/plasma-b2c/src/components/Attach/Attach.config.ts +++ b/packages/plasma-b2c/src/components/Attach/Attach.config.ts @@ -1,3 +1,54 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,439 +61,439 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.buttonColorActive}: var(--text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.buttonColorHover}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.buttonColorActive}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.iconButtonColorHover}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.iconButtonColorActive}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary-hover); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.buttonColorActive}: var(--text-primary-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColorHover}: ${textPrimaryHover}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.buttonColorActive}: ${textPrimaryActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary-hover); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonColorActive}: var(--text-primary-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonColorActive}: ${textPrimaryActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, success: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-positive); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfacePositive}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, warning: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-warning); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceWarning}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, critical: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-negative); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceNegative}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-negative-active); - - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; + + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, dark: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, black: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, white: css` - ${attachTokens.buttonColor}: var(--on-light-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.buttonColor}: ${onLightTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -457,12 +508,12 @@ export const config = { ${attachTokens.buttonWidth}: 12.5rem; ${attachTokens.buttonPadding}: 1.5rem; ${attachTokens.buttonRadius}: 0.875rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyL.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -481,37 +532,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonHeight}: 3.5rem; ${attachTokens.iconButtonWidth}: 3.5rem; ${attachTokens.iconButtonPadding}: 1.5rem; ${attachTokens.iconButtonRadius}: 0.875rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -520,12 +571,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -547,12 +598,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -571,37 +622,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -610,12 +661,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -637,12 +688,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -661,37 +712,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -700,12 +751,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -727,12 +778,12 @@ export const config = { ${attachTokens.buttonWidth}: 10rem; ${attachTokens.buttonPadding}: 0.75rem; ${attachTokens.buttonRadius}: 0.5rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -751,37 +802,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.25rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2rem; ${attachTokens.iconButtonWidth}: 2rem; ${attachTokens.iconButtonPadding}: 0.75rem; ${attachTokens.iconButtonRadius}: 0.5rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -790,12 +841,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.config.ts b/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.config.ts index 445f4504839..756159b66d0 100644 --- a/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,172 +40,172 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-positive); - ${tokens.textFieldDividerColorHover}: var(--surface-positive); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfacePositive}; + ${tokens.textFieldDividerColorHover}: ${surfacePositive}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-warning); - ${tokens.textFieldDividerColorHover}: var(--surface-warning); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceWarning}; + ${tokens.textFieldDividerColorHover}: ${surfaceWarning}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--surface-negative); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${surfaceNegative}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, }, size: { @@ -193,21 +224,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -215,12 +246,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -240,12 +271,12 @@ export const config = { ${tokens.itemPadding}: 1.0625rem 1rem; ${tokens.itemBorderRadius}: 0.75rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; ${tokens.emptyStateGap}: 0.5rem; @@ -268,21 +299,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -290,12 +321,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -315,12 +346,12 @@ export const config = { ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; ${tokens.emptyStateGap}: 0.375rem; @@ -343,21 +374,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -365,12 +396,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -390,12 +421,12 @@ export const config = { ${tokens.itemPadding}: 0.6875rem 0.75rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -418,21 +449,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -440,12 +471,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -465,12 +496,12 @@ export const config = { ${tokens.itemPadding}: 0.5625rem 0.5rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; ${tokens.emptyStateGap}: 0.25rem; @@ -481,22 +512,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -509,12 +540,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -533,12 +564,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -556,14 +587,14 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Badge/Badge.config.ts b/packages/plasma-b2c/src/components/Badge/Badge.config.ts index 3d8e8df196e..7ed52a240c7 100644 --- a/packages/plasma-b2c/src/components/Badge/Badge.config.ts +++ b/packages/plasma-b2c/src/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +36,67 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -78,12 +106,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -97,12 +125,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -116,12 +144,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -135,12 +163,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -159,7 +187,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/plasma-b2c/src/components/Breadcrumbs/Breadcrumbs.config.ts index 1661a5df0e3..9ad3d874083 100644 --- a/packages/plasma-b2c/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/plasma-b2c/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,53 +20,53 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { l: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.5rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-l-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-l-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-l-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-l-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-l-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight}; `, m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${breadcrumbsTokens.breadcrumbsGap}: 0rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-xs-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-xs-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-xs-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-xs-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-xs-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Button/Button.config.ts b/packages/plasma-b2c/src/components/Button/Button.config.ts index d47ee26a019..1e7a4594fb0 100644 --- a/packages/plasma-b2c/src/components/Button/Button.config.ts +++ b/packages/plasma-b2c/src/components/Button/Button.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,118 +53,118 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, /** * @deprecated * использовать `default` */ primary: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -129,12 +173,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.75rem; ${buttonTokens.buttonRadius}: 1rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.5rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -150,12 +194,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 0.875rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -171,12 +215,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -192,12 +236,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -213,12 +257,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -234,12 +278,12 @@ export const config = { ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: 0.375rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 0.75rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -258,7 +302,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/plasma-b2c/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/plasma-b2c/src/components/ButtonGroup/ButtonGroup.config.ts index cd13bd54c9b..91297d48df9 100644 --- a/packages/plasma-b2c/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/plasma-b2c/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,140 +56,140 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, /** * @deprecated * использовать `default` */ primary: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, success: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; `, }, size: { @@ -152,12 +200,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 4rem; ${buttonGroupTokens.buttonPadding}: 1.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, l: css` ${buttonGroupTokens.buttonDefaultRadius}: 0.875rem; @@ -166,12 +214,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3.5rem; ${buttonGroupTokens.buttonPadding}: 1.5rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, m: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -181,12 +229,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -195,12 +243,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -209,12 +257,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -223,12 +271,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 1.5rem; ${buttonGroupTokens.buttonPadding}: 0.625rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/plasma-b2c/src/components/Calendar/Calendar.config.ts b/packages/plasma-b2c/src/components/Calendar/Calendar.config.ts index fc0a15388db..a79fdb1d1f4 100644 --- a/packages/plasma-b2c/src/components/Calendar/Calendar.config.ts +++ b/packages/plasma-b2c/src/components/Calendar/Calendar.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,38 +35,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -51,46 +77,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +126,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 4rem; ${calendarBaseTokens.iconButtonWidth}: 4rem; @@ -120,46 +146,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -169,13 +195,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3.5rem; ${calendarBaseTokens.iconButtonWidth}: 3.5rem; @@ -189,46 +215,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -238,13 +264,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -258,46 +284,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -307,13 +333,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -327,46 +353,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -376,13 +402,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; @@ -400,12 +426,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -414,7 +440,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -425,12 +451,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -439,7 +465,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts b/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts index 70c9a8be880..02dc74fb697 100644 --- a/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,39 +35,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -52,46 +78,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +127,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 4rem; ${calendarDoubleTokens.iconButtonWidth}: 4rem; @@ -121,46 +147,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -170,13 +196,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; @@ -190,46 +216,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -239,13 +265,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -259,46 +285,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -308,13 +334,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -328,46 +354,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +403,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; @@ -401,12 +427,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -415,7 +441,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -426,12 +452,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -440,7 +466,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Carousel/Carousel.config.ts b/packages/plasma-b2c/src/components/Carousel/Carousel.config.ts index f3fd82e4491..f333008d0bf 100644 --- a/packages/plasma-b2c/src/components/Carousel/Carousel.config.ts +++ b/packages/plasma-b2c/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +16,14 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary); - ${tokens.paginationDotActiveBackground}: var(--surface-solid-default); - ${tokens.controlIconButtonColor}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.controlIconButtonColorHover}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.controlIconButtonColorActive}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary}; + ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault}; + ${tokens.controlIconButtonColor}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.controlIconButtonColorHover}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.controlIconButtonColorActive}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, }, size: { diff --git a/packages/plasma-b2c/src/components/Cell/Cell.config.ts b/packages/plasma-b2c/src/components/Cell/Cell.config.ts index 6588088c11f..77ecbee5e70 100644 --- a/packages/plasma-b2c/src/components/Cell/Cell.config.ts +++ b/packages/plasma-b2c/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -87,26 +88,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -119,26 +120,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Checkbox/Checkbox.config.ts b/packages/plasma-b2c/src/components/Checkbox/Checkbox.config.ts index 2c8c0abc3b8..aa7bba11e27 100644 --- a/packages/plasma-b2c/src/components/Checkbox/Checkbox.config.ts +++ b/packages/plasma-b2c/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,18 +33,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -39,18 +55,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${checkboxTokens.margin}: 0; @@ -60,100 +76,100 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.125rem; ${checkboxTokens.contentTopOffset}: 0.0625rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyL.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); - ${checkboxTokens.labelColor}: var(--text-primary); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; + ${checkboxTokens.labelColor}: ${textPrimary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${checkboxTokens.fillColor}: var(--text-primary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPrimary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated primary: css` - ${checkboxTokens.fillColor}: var(--text-primary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPrimary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${checkboxTokens.fillColor}: var(--text-secondary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textSecondary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${checkboxTokens.fillColor}: var(--text-tertiary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textTertiary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${checkboxTokens.fillColor}: var(--text-paragraph); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textParagraph}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${checkboxTokens.fillColor}: var(--text-positive); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPositive}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${checkboxTokens.fillColor}: var(--text-warning); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textWarning}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, negative: css` - ${checkboxTokens.fillColor}: var(--text-negative); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textNegative}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-negative); + ${checkboxTokens.triggerBorderColor}: ${textNegative}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -164,7 +180,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/plasma-b2c/src/components/ChipGroup/ChipGroup.config.ts b/packages/plasma-b2c/src/components/ChipGroup/ChipGroup.config.ts index 2bed06ad8c0..690d82af44e 100644 --- a/packages/plasma-b2c/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/plasma-b2c/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +26,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +57,12 @@ export const config = { ${tokens.chipHeight}: 3rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.5rem; @@ -60,12 +78,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -81,12 +99,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; @@ -102,12 +120,12 @@ export const config = { ${tokens.chipHeight}: 1.5rem; ${tokens.chipPadding}: 0 0.625rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/plasma-b2c/src/components/CodeField/CodeField.config.ts b/packages/plasma-b2c/src/components/CodeField/CodeField.config.ts index d0109404d66..d6b96618fc3 100644 --- a/packages/plasma-b2c/src/components/CodeField/CodeField.config.ts +++ b/packages/plasma-b2c/src/components/CodeField/CodeField.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodyXS, + outlineAccent, + surfaceAccent, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, codeFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,19 +26,19 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--surface-accent); + ${tokens.caretColor}: ${surfaceAccent}; - ${tokens.captionColor}: var(--text-secondary); - ${tokens.captionColorError}: var(--text-negative); + ${tokens.captionColor}: ${textSecondary}; + ${tokens.captionColorError}: ${textNegative}; - ${tokens.codeColor}: var(--text-primary); - ${tokens.codeColorError}: var(--text-negative); - ${tokens.borderColorFocus}: var(--outline-accent); + ${tokens.codeColor}: ${textPrimary}; + ${tokens.codeColorError}: ${textNegative}; + ${tokens.borderColorFocus}: ${outlineAccent}; - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; `, }, size: { @@ -34,19 +51,19 @@ export const config = { ${tokens.codeItemWidth}: 2.75rem; ${tokens.codeItemHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.captionFontFamily}: ${bodyS.fontFamily}; + ${tokens.captionFontSize}: ${bodyS.fontSize}; + ${tokens.captionFontStyle}: ${bodyS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyS.lineHeight}; ${tokens.borderRadius}: 0.875rem; ${tokens.borderRadiusSegmented}: 0.375rem; @@ -61,19 +78,19 @@ export const config = { ${tokens.codeItemWidth}: 2.375rem; ${tokens.codeItemHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.captionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.captionFontSize}: ${bodyXS.fontSize}; + ${tokens.captionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyXS.lineHeight}; ${tokens.borderRadius}: 0.75rem; ${tokens.borderRadiusSegmented}: 0.25rem; diff --git a/packages/plasma-b2c/src/components/Combobox/Combobox.config.ts b/packages/plasma-b2c/src/components/Combobox/Combobox.config.ts index 9b023838c5d..eab31c4dc9d 100644 --- a/packages/plasma-b2c/src/components/Combobox/Combobox.config.ts +++ b/packages/plasma-b2c/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,221 +40,221 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -243,20 +274,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -264,12 +295,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -292,12 +323,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 1rem; ${tokens.padding}: 0.125rem; @@ -319,19 +350,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -364,20 +395,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -385,12 +416,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -413,12 +444,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -440,19 +471,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -485,20 +516,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -506,12 +537,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -534,12 +565,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 0.625rem 0.875rem 0.625rem 0.875rem; ${tokens.padding}: 0.125rem; @@ -561,19 +592,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -606,20 +637,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -627,12 +658,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -655,12 +686,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 0.5rem 0.625rem 0.5rem 0.625rem; ${tokens.padding}: 0.125rem; @@ -682,19 +713,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -714,22 +745,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -742,12 +773,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -766,12 +797,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -789,13 +820,13 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.config.ts b/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.config.ts index c205800f242..6a72e748cb3 100644 --- a/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.config.ts +++ b/packages/plasma-b2c/src/components/Combobox/Legacy/Combobox.config.ts @@ -1,3 +1,22 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, comboboxOldTokens as comboboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,7 +35,7 @@ export const config = { ${comboboxTokens.paddingBottom}: 0.125rem; ${comboboxTokens.paddingLeft}: 0.125rem; - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerColor}: ${surfaceTransparentTertiary}; ${comboboxTokens.dividerHeight}: 0.063rem; ${comboboxTokens.dividerMarginTop}: 0; ${comboboxTokens.dividerMarginRight}: 0.5rem; @@ -31,12 +50,12 @@ export const config = { ${comboboxTokens.itemPaddingLeft}: 0.375rem; ${comboboxTokens.itemBorderRadius}: 0.375rem; ${comboboxTokens.itemContentLeftWidth}: 1.25rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${comboboxTokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${comboboxTokens.itemFontSize}: ${bodyXS.fontSize}; + ${comboboxTokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${comboboxTokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${comboboxTokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${comboboxTokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${comboboxTokens.chipGap}: 0.25rem; ${comboboxTokens.chipBorderRadius}: 0.125rem; @@ -46,12 +65,12 @@ export const config = { ${comboboxTokens.chipClearContentMarginLeft}: 0.25rem; ${comboboxTokens.chipClearContentMarginRight}: 0rem; ${comboboxTokens.chipCloseIconSize}: 0.75rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${comboboxTokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${comboboxTokens.chipFontSize}: ${bodyXS.fontSize}; + ${comboboxTokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${comboboxTokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${comboboxTokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${comboboxTokens.chipLineHeight}: ${bodyXS.lineHeight}; ${comboboxTokens.targetArrowRight}: 0.5rem; ${comboboxTokens.targetHeight}: 2rem; @@ -62,18 +81,18 @@ export const config = { ${comboboxTokens.targetPaddingWithInput}: 0 2.625rem 0 0.625rem; ${comboboxTokens.targetInnerTop}: 0.5rem; ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-xs-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${comboboxTokens.targetFontFamily}: ${bodyXS.fontFamily}; + ${comboboxTokens.targetFontSize}: ${bodyXS.fontSize}; + ${comboboxTokens.targetFontStyle}: ${bodyXS.fontStyle}; + ${comboboxTokens.targetFontWeight}: ${bodyXS.fontWeight}; + ${comboboxTokens.targetLetterSpacing}: ${bodyXS.letterSpacing}; + ${comboboxTokens.targetLineHeight}: ${bodyXS.lineHeight}; + ${comboboxTokens.targetLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${comboboxTokens.targetLabelInnerFontSize}: ${bodyXS.fontSize}; + ${comboboxTokens.targetLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${comboboxTokens.targetLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${comboboxTokens.targetLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${comboboxTokens.targetLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${comboboxTokens.width}: 100%; @@ -84,7 +103,7 @@ export const config = { ${comboboxTokens.paddingBottom}: 0.125rem; ${comboboxTokens.paddingLeft}: 0.125rem; - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerColor}: ${surfaceTransparentTertiary}; ${comboboxTokens.dividerHeight}: 0.063rem; ${comboboxTokens.dividerMarginTop}: 0; ${comboboxTokens.dividerMarginRight}: 0.75rem; @@ -99,12 +118,12 @@ export const config = { ${comboboxTokens.itemPaddingLeft}: 0.75rem; ${comboboxTokens.itemBorderRadius}: 0.5rem; ${comboboxTokens.itemContentLeftWidth}: 1.75rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${comboboxTokens.itemFontFamily}: ${bodyS.fontFamily}; + ${comboboxTokens.itemFontSize}: ${bodyS.fontSize}; + ${comboboxTokens.itemFontStyle}: ${bodyS.fontStyle}; + ${comboboxTokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${comboboxTokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${comboboxTokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${comboboxTokens.chipGap}: 0.25rem; ${comboboxTokens.chipBorderRadius}: 0.25rem; @@ -114,12 +133,12 @@ export const config = { ${comboboxTokens.chipClearContentMarginLeft}: 0.375rem; ${comboboxTokens.chipClearContentMarginRight}: 0rem; ${comboboxTokens.chipCloseIconSize}: 0.75rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${comboboxTokens.chipFontFamily}: ${bodyS.fontFamily}; + ${comboboxTokens.chipFontSize}: ${bodyS.fontSize}; + ${comboboxTokens.chipFontStyle}: ${bodyS.fontStyle}; + ${comboboxTokens.chipFontWeight}: ${bodyS.fontWeight}; + ${comboboxTokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${comboboxTokens.chipLineHeight}: ${bodyS.lineHeight}; ${comboboxTokens.targetArrowRight}: 0.75rem; ${comboboxTokens.targetHeight}: 2.5rem; @@ -130,18 +149,18 @@ export const config = { ${comboboxTokens.targetPaddingWithInput}: 0 3.125rem 0 0.625rem; ${comboboxTokens.targetInnerTop}: 0.5rem; ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-s-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${comboboxTokens.targetFontFamily}: ${bodyS.fontFamily}; + ${comboboxTokens.targetFontSize}: ${bodyS.fontSize}; + ${comboboxTokens.targetFontStyle}: ${bodyS.fontStyle}; + ${comboboxTokens.targetFontWeight}: ${bodyS.fontWeight}; + ${comboboxTokens.targetLetterSpacing}: ${bodyS.letterSpacing}; + ${comboboxTokens.targetLineHeight}: ${bodyS.lineHeight}; + ${comboboxTokens.targetLabelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${comboboxTokens.targetLabelInnerFontSize}: ${bodyXXS.fontSize}; + ${comboboxTokens.targetLabelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${comboboxTokens.targetLabelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${comboboxTokens.targetLabelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${comboboxTokens.targetLabelInnerLineHeight}: ${bodyXXS.lineHeight}; `, m: css` ${comboboxTokens.width}: 100%; @@ -152,7 +171,7 @@ export const config = { ${comboboxTokens.paddingBottom}: 0.125rem; ${comboboxTokens.paddingLeft}: 0.125rem; - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerColor}: ${surfaceTransparentTertiary}; ${comboboxTokens.dividerHeight}: 0.063rem; ${comboboxTokens.dividerMarginTop}: 0; ${comboboxTokens.dividerMarginRight}: 0.875rem; @@ -167,12 +186,12 @@ export const config = { ${comboboxTokens.itemPaddingLeft}: 0.875rem; ${comboboxTokens.itemBorderRadius}: 0.625rem; ${comboboxTokens.itemContentLeftWidth}: 1.75rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${comboboxTokens.itemFontFamily}: ${bodyM.fontFamily}; + ${comboboxTokens.itemFontSize}: ${bodyM.fontSize}; + ${comboboxTokens.itemFontStyle}: ${bodyM.fontStyle}; + ${comboboxTokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${comboboxTokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${comboboxTokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${comboboxTokens.chipGap}: 0.25rem; ${comboboxTokens.chipBorderRadius}: 0.375rem; @@ -182,12 +201,12 @@ export const config = { ${comboboxTokens.chipClearContentMarginLeft}: 0.5rem; ${comboboxTokens.chipClearContentMarginRight}: 0rem; ${comboboxTokens.chipCloseIconSize}: 1rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${comboboxTokens.chipFontFamily}: ${bodyM.fontFamily}; + ${comboboxTokens.chipFontSize}: ${bodyM.fontSize}; + ${comboboxTokens.chipFontStyle}: ${bodyM.fontStyle}; + ${comboboxTokens.chipFontWeight}: ${bodyM.fontWeight}; + ${comboboxTokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${comboboxTokens.chipLineHeight}: ${bodyM.lineHeight}; ${comboboxTokens.targetArrowRight}: 0.875rem; ${comboboxTokens.targetHeight}: 3rem; @@ -198,18 +217,18 @@ export const config = { ${comboboxTokens.targetPaddingWithInput}: 0 3.375rem 0 0.625rem; ${comboboxTokens.targetInnerTop}: 0.5rem; ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-m-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${comboboxTokens.targetFontFamily}: ${bodyM.fontFamily}; + ${comboboxTokens.targetFontSize}: ${bodyM.fontSize}; + ${comboboxTokens.targetFontStyle}: ${bodyM.fontStyle}; + ${comboboxTokens.targetFontWeight}: ${bodyM.fontWeight}; + ${comboboxTokens.targetLetterSpacing}: ${bodyM.letterSpacing}; + ${comboboxTokens.targetLineHeight}: ${bodyM.lineHeight}; + ${comboboxTokens.targetLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${comboboxTokens.targetLabelInnerFontSize}: ${bodyXS.fontSize}; + ${comboboxTokens.targetLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${comboboxTokens.targetLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${comboboxTokens.targetLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${comboboxTokens.targetLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${comboboxTokens.width}: 100%; @@ -220,7 +239,7 @@ export const config = { ${comboboxTokens.paddingBottom}: 0.125rem; ${comboboxTokens.paddingLeft}: 0.125rem; - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerColor}: ${surfaceTransparentTertiary}; ${comboboxTokens.dividerHeight}: 0.063rem; ${comboboxTokens.dividerMarginTop}: 0; ${comboboxTokens.dividerMarginRight}: 1rem; @@ -235,12 +254,12 @@ export const config = { ${comboboxTokens.itemPaddingLeft}: 1rem; ${comboboxTokens.itemBorderRadius}: 0.75rem; ${comboboxTokens.itemContentLeftWidth}: 1.875rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${comboboxTokens.itemFontFamily}: ${bodyL.fontFamily}; + ${comboboxTokens.itemFontSize}: ${bodyL.fontSize}; + ${comboboxTokens.itemFontStyle}: ${bodyL.fontStyle}; + ${comboboxTokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${comboboxTokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${comboboxTokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${comboboxTokens.chipGap}: 0.25rem; ${comboboxTokens.chipBorderRadius}: 0.5rem; @@ -250,12 +269,12 @@ export const config = { ${comboboxTokens.chipClearContentMarginLeft}: 0.625rem; ${comboboxTokens.chipClearContentMarginRight}: 0rem; ${comboboxTokens.chipCloseIconSize}: 1rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${comboboxTokens.chipFontFamily}: ${bodyM.fontFamily}; + ${comboboxTokens.chipFontSize}: ${bodyM.fontSize}; + ${comboboxTokens.chipFontStyle}: ${bodyM.fontStyle}; + ${comboboxTokens.chipFontWeight}: ${bodyM.fontWeight}; + ${comboboxTokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${comboboxTokens.chipLineHeight}: ${bodyM.lineHeight}; ${comboboxTokens.targetArrowRight}: 1rem; ${comboboxTokens.targetHeight}: 3.5rem; @@ -266,54 +285,54 @@ export const config = { ${comboboxTokens.targetPaddingWithInput}: 0 3.625rem 0 0.625rem; ${comboboxTokens.targetInnerTop}: 0.5rem; ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-l-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-l-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-l-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-l-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-l-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-s-line-height); + ${comboboxTokens.targetFontFamily}: ${bodyL.fontFamily}; + ${comboboxTokens.targetFontSize}: ${bodyL.fontSize}; + ${comboboxTokens.targetFontStyle}: ${bodyL.fontStyle}; + ${comboboxTokens.targetFontWeight}: ${bodyL.fontWeight}; + ${comboboxTokens.targetLetterSpacing}: ${bodyL.letterSpacing}; + ${comboboxTokens.targetLineHeight}: ${bodyL.lineHeight}; + ${comboboxTokens.targetLabelInnerFontFamily}: ${bodyS.fontFamily}; + ${comboboxTokens.targetLabelInnerFontSize}: ${bodyS.fontSize}; + ${comboboxTokens.targetLabelInnerFontStyle}: ${bodyS.fontStyle}; + ${comboboxTokens.targetLabelInnerFontWeight}: ${bodyS.fontWeight}; + ${comboboxTokens.targetLabelInnerLetterSpacing}: ${bodyS.letterSpacing}; + ${comboboxTokens.targetLabelInnerLineHeight}: ${bodyS.lineHeight}; `, }, view: { default: css` - ${comboboxTokens.targetColor}: var(--text-primary); - ${comboboxTokens.targetLabelColor}: var(--text-secondary); - ${comboboxTokens.targetArrowColor}: var(--text-secondary); - ${comboboxTokens.targetBackgroundColor}: var(--surface-transparent-primary); - ${comboboxTokens.targetBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${comboboxTokens.targetBackgroundColorActive}: var(--surface-transparent-primary-active); - ${comboboxTokens.targetBackgroundColorOpen}: var(--surface-transparent-secondary); + ${comboboxTokens.targetColor}: ${textPrimary}; + ${comboboxTokens.targetLabelColor}: ${textSecondary}; + ${comboboxTokens.targetArrowColor}: ${textSecondary}; + ${comboboxTokens.targetBackgroundColor}: ${surfaceTransparentPrimary}; + ${comboboxTokens.targetBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${comboboxTokens.targetBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${comboboxTokens.targetBackgroundColorOpen}: ${surfaceTransparentSecondary}; - ${comboboxTokens.background}: var(--surface-solid-card-brightness); + ${comboboxTokens.background}: ${surfaceSolidCardBrightness}; ${comboboxTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); /* TODO: Забирать из токена --shadow-down-soft-s */ ${comboboxTokens.itemBackground}: transparent; - ${comboboxTokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${comboboxTokens.itemBackgroundSelectedHover}: var(--surface-transparent-secondary); - ${comboboxTokens.itemColor}: var(--text-primary); - ${comboboxTokens.itemContentLeftColor}: var(--text-accent); + ${comboboxTokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${comboboxTokens.itemBackgroundSelectedHover}: ${surfaceTransparentSecondary}; + ${comboboxTokens.itemColor}: ${textPrimary}; + ${comboboxTokens.itemContentLeftColor}: ${textAccent}; - ${comboboxTokens.chipCloseIconColor}: var(--text-secondary); - ${comboboxTokens.chipColor}: var(--text-primary); - ${comboboxTokens.chipBackground}: var(--surface-transparent-secondary); - ${comboboxTokens.chipColorHover}: var(--text-primary); - ${comboboxTokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${comboboxTokens.chipColorActive}: var(--text-primary); - ${comboboxTokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${comboboxTokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${comboboxTokens.chipColorReadOnly}: var(--text-primary); - ${comboboxTokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${comboboxTokens.chipColorReadOnlyHover}: var(--text-primary); + ${comboboxTokens.chipCloseIconColor}: ${textSecondary}; + ${comboboxTokens.chipColor}: ${textPrimary}; + ${comboboxTokens.chipBackground}: ${surfaceTransparentSecondary}; + ${comboboxTokens.chipColorHover}: ${textPrimary}; + ${comboboxTokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${comboboxTokens.chipColorActive}: ${textPrimary}; + ${comboboxTokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${comboboxTokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${comboboxTokens.chipColorReadOnly}: ${textPrimary}; + ${comboboxTokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${comboboxTokens.chipColorReadOnlyHover}: ${textPrimary}; ${comboboxTokens.chipOpacityReadonly}: 0.72; ${comboboxTokens.disabledOpacity}: 0.4; - ${comboboxTokens.focusColor}: var(--surface-accent); + ${comboboxTokens.focusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Counter/Counter.config.ts b/packages/plasma-b2c/src/components/Counter/Counter.config.ts index 140aa43a57f..0c0fdf42446 100644 --- a/packages/plasma-b2c/src/components/Counter/Counter.config.ts +++ b/packages/plasma-b2c/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,32 +23,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -41,56 +56,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/plasma-b2c/src/components/DatePicker/DatePicker.clear.config.ts b/packages/plasma-b2c/src/components/DatePicker/DatePicker.clear.config.ts index c2e334a638a..233efa22b22 100644 --- a/packages/plasma-b2c/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/plasma-b2c/src/components/DatePicker/DatePicker.clear.config.ts @@ -1,3 +1,46 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,64 +51,64 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); + ${tokens.outlineFocusColor}: ${surfaceAccent}; ${tokens.background}: transparent; ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.focusColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.focusColor}: ${textAccent}; ${tokens.textFieldBackgroundColor}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -74,76 +117,76 @@ export const config = { ${tokens.textFieldBackgroundSuccessColor}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -152,12 +195,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -167,12 +210,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -198,30 +241,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}:0.82rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; @@ -239,46 +282,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -289,25 +332,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -318,12 +361,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -333,12 +376,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -369,30 +412,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -410,46 +453,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -460,25 +503,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -489,12 +532,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -504,12 +547,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -540,30 +583,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -581,46 +624,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -631,25 +674,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -660,12 +703,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -675,12 +718,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -711,30 +754,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -752,46 +795,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -802,25 +845,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -831,12 +874,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -846,12 +889,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -882,30 +925,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -923,46 +966,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -973,25 +1016,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -1008,12 +1051,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1022,7 +1065,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1033,12 +1076,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1047,15 +1090,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1068,12 +1111,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1092,12 +1135,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1116,15 +1159,15 @@ export const config = { readOnly: { true: css` ${tokens.backgroundReadOnly}: transparent; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts b/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts index 6de2794285d..d3ef6870007 100644 --- a/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts +++ b/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,110 +50,110 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -120,12 +162,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -135,12 +177,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -164,30 +206,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -205,46 +247,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -255,25 +297,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -284,12 +326,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -299,12 +341,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -334,30 +376,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -375,46 +417,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -425,25 +467,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -454,12 +496,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -469,12 +511,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -504,30 +546,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -545,46 +587,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -595,25 +637,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -624,12 +666,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -639,12 +681,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -674,30 +716,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -715,46 +757,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -765,25 +807,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -794,12 +836,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -809,12 +851,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -844,30 +886,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -885,46 +927,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -935,25 +977,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -970,12 +1012,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -984,7 +1026,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -995,12 +1037,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1009,15 +1051,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1030,12 +1072,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1054,12 +1096,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1077,16 +1119,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/plasma-b2c/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/plasma-b2c/src/components/DateTimePicker/DateTimePicker.config.ts index 6ac3406a0e3..b7278e6a571 100644 --- a/packages/plasma-b2c/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/plasma-b2c/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,91 +52,91 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -113,30 +155,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -146,12 +188,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -168,46 +210,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.875rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.875rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.875rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -218,13 +260,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; @@ -237,21 +279,21 @@ export const config = { ${tokens.timePickerItemHeight}: 4rem; ${tokens.timePickerItemBorderRadius}: 0.875rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -272,30 +314,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -305,12 +347,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -327,46 +369,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +419,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; @@ -396,21 +438,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3.5rem; ${tokens.timePickerItemBorderRadius}: 0.75rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -431,30 +473,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +506,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -486,46 +528,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -536,13 +578,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; @@ -555,21 +597,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3rem; ${tokens.timePickerItemBorderRadius}: 0.625rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyM.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyM.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyM.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -590,30 +632,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -623,12 +665,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -645,46 +687,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -695,13 +737,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -714,21 +756,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -749,30 +791,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -782,12 +824,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -804,46 +846,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -854,13 +896,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -873,21 +915,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -962,12 +1004,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -976,7 +1018,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -987,12 +1029,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1001,7 +1043,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -1011,12 +1053,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/plasma-b2c/src/components/Divider/Divider.config.ts b/packages/plasma-b2c/src/components/Divider/Divider.config.ts index df0449d5c06..6dbbf4df60c 100644 --- a/packages/plasma-b2c/src/components/Divider/Divider.config.ts +++ b/packages/plasma-b2c/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/plasma-b2c/src/components/Drawer/Drawer.config.ts b/packages/plasma-b2c/src/components/Drawer/Drawer.config.ts index b0b00b15040..d5b00bec29e 100644 --- a/packages/plasma-b2c/src/components/Drawer/Drawer.config.ts +++ b/packages/plasma-b2c/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/plasma-b2c/src/components/Dropdown/Dropdown.config.ts b/packages/plasma-b2c/src/components/Dropdown/Dropdown.config.ts index f14dd28fbd7..443b0027ea9 100644 --- a/packages/plasma-b2c/src/components/Dropdown/Dropdown.config.ts +++ b/packages/plasma-b2c/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,11 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -24,12 +32,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.5rem; ${tokens.dividerMarginBottomTight}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -37,12 +45,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.padding}: 0.125rem; @@ -61,12 +69,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -74,12 +82,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.padding}: 0.125rem; @@ -98,12 +106,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -111,12 +119,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 0.125rem; @@ -135,12 +143,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -148,12 +156,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.padding}: 0.125rem; @@ -172,12 +180,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.125rem; ${tokens.dividerMarginBottomTight}: 0.125rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -185,18 +193,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Dropdown/components/DropdownOld.config.ts b/packages/plasma-b2c/src/components/Dropdown/components/DropdownOld.config.ts index 74bd9644d57..0ca405194f8 100644 --- a/packages/plasma-b2c/src/components/Dropdown/components/DropdownOld.config.ts +++ b/packages/plasma-b2c/src/components/Dropdown/components/DropdownOld.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceSolidCardBrightness, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, dropdownOldTokens as dropdownTokens } from '@salutejs/plasma-new-hope/styled-components'; const dropdownSizeCommon = ` @@ -36,12 +45,12 @@ export const config = { ${dropdownTokens.itemPaddingLeft}: 0.5rem; ${dropdownTokens.itemBorderRadius}: 0.375rem; - ${dropdownTokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${dropdownTokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${dropdownTokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${dropdownTokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${dropdownTokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${dropdownTokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${dropdownTokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${dropdownTokens.itemFontSize}: ${bodyXS.fontSize}; + ${dropdownTokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${dropdownTokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${dropdownTokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${dropdownTokens.itemFontLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${dropdownSizeCommon}; @@ -53,12 +62,12 @@ export const config = { ${dropdownTokens.itemPaddingLeft}: 0.75rem; ${dropdownTokens.itemBorderRadius}: 0.5rem; - ${dropdownTokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropdownTokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${dropdownTokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropdownTokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${dropdownTokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropdownTokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropdownTokens.itemFontFamily}: ${bodyS.fontFamily}; + ${dropdownTokens.itemFontSize}: ${bodyS.fontSize}; + ${dropdownTokens.itemFontStyle}: ${bodyS.fontStyle}; + ${dropdownTokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${dropdownTokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${dropdownTokens.itemFontLineHeight}: ${bodyS.lineHeight}; `, m: css` ${dropdownSizeCommon}; @@ -70,12 +79,12 @@ export const config = { ${dropdownTokens.itemPaddingLeft}: 0.875rem; ${dropdownTokens.itemBorderRadius}: 0.625rem; - ${dropdownTokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${dropdownTokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${dropdownTokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${dropdownTokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${dropdownTokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${dropdownTokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${dropdownTokens.itemFontFamily}: ${bodyM.fontFamily}; + ${dropdownTokens.itemFontSize}: ${bodyM.fontSize}; + ${dropdownTokens.itemFontStyle}: ${bodyM.fontStyle}; + ${dropdownTokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${dropdownTokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${dropdownTokens.itemFontLineHeight}: ${bodyM.lineHeight}; `, l: css` ${dropdownSizeCommon}; @@ -87,28 +96,28 @@ export const config = { ${dropdownTokens.itemPaddingLeft}: 1rem; ${dropdownTokens.itemBorderRadius}: 0.75rem; - ${dropdownTokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${dropdownTokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${dropdownTokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${dropdownTokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${dropdownTokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${dropdownTokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${dropdownTokens.itemFontFamily}: ${bodyL.fontFamily}; + ${dropdownTokens.itemFontSize}: ${bodyL.fontSize}; + ${dropdownTokens.itemFontStyle}: ${bodyL.fontStyle}; + ${dropdownTokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${dropdownTokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${dropdownTokens.itemFontLineHeight}: ${bodyL.lineHeight}; `, }, view: { default: css` ${dropdownTokens.disabledOpacity}: 0.4; - ${dropdownTokens.background}: var(--surface-solid-card-brightness); + ${dropdownTokens.background}: ${surfaceSolidCardBrightness}; // TODO: #1131 Вернуть токен --shadow-down-soft-s ${dropdownTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${dropdownTokens.itemBackground}: transparent; - ${dropdownTokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${dropdownTokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${dropdownTokens.itemBackgroundSelected}: inherit; ${dropdownTokens.itemColorSelected}: inherit; ${dropdownTokens.itemBackgroundSelectedHover}: inherit; ${dropdownTokens.itemColorSelectedHover}: inherit; - ${dropdownTokens.itemColor}: var(--text-primary); + ${dropdownTokens.itemColor}: ${textPrimary}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Dropzone/Dropzone.config.ts b/packages/plasma-b2c/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..b1acc17d9ef 100644 --- a/packages/plasma-b2c/src/components/Dropzone/Dropzone.config.ts +++ b/packages/plasma-b2c/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-b2c/src/components/Editable/Editable.config.ts b/packages/plasma-b2c/src/components/Editable/Editable.config.ts index b6dbf7f60a1..5ab78ece1f3 100644 --- a/packages/plasma-b2c/src/components/Editable/Editable.config.ts +++ b/packages/plasma-b2c/src/components/Editable/Editable.config.ts @@ -1,3 +1,10 @@ +import { + backgroundPrimary, + textAccent, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, editableTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +15,11 @@ export const config = { variations: { view: { default: css` - ${editableTokens.editButtonBackground}: var(--background-primary); - ${editableTokens.editButtonColor}: var(--text-tertiary); - ${editableTokens.editButtonColorHover}: var(--text-primary); - ${editableTokens.placeholderColor}: var(--text-secondary); - ${editableTokens.caretColor}: var(--text-accent); + ${editableTokens.editButtonBackground}: ${backgroundPrimary}; + ${editableTokens.editButtonColor}: ${textTertiary}; + ${editableTokens.editButtonColorHover}: ${textPrimary}; + ${editableTokens.placeholderColor}: ${textSecondary}; + ${editableTokens.caretColor}: ${textAccent}; `, }, size: { diff --git a/packages/plasma-b2c/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/plasma-b2c/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..7bbb99b8b26 100644 --- a/packages/plasma-b2c/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/plasma-b2c/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-b2c/src/components/EmptyState/EmptyState.config.ts b/packages/plasma-b2c/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..a342d53bbc6 100644 --- a/packages/plasma-b2c/src/components/EmptyState/EmptyState.config.ts +++ b/packages/plasma-b2c/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-b2c/src/components/File/File.config.ts b/packages/plasma-b2c/src/components/File/File.config.ts index 455a87f891b..07d42b7781c 100644 --- a/packages/plasma-b2c/src/components/File/File.config.ts +++ b/packages/plasma-b2c/src/components/File/File.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, fileTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +24,36 @@ export const config = { variations: { view: { default: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-secondary); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textSecondary}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-solid-default); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; `, negative: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-negative); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textNegative}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-negative); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceNegative}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-negative); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceNegative}; `, }, size: { @@ -52,19 +68,19 @@ export const config = { ${tokens.cellGap}: 0.75rem; ${tokens.cellPaddingRightContent}: 0.75rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -94,19 +110,19 @@ export const config = { ${tokens.cellGap}: 0.625rem; ${tokens.cellPaddingRightContent}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -136,19 +152,19 @@ export const config = { ${tokens.cellGap}: 0.5rem; ${tokens.cellPaddingRightContent}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -178,19 +194,19 @@ export const config = { ${tokens.cellGap}: 0.375rem; ${tokens.cellPaddingRightContent}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 24; ${tokens.progressBarCircularHeight}: 1.5rem; diff --git a/packages/plasma-b2c/src/components/IconButton/IconButton.config.ts b/packages/plasma-b2c/src/components/IconButton/IconButton.config.ts index 9d760c4f3f2..fa898e69464 100644 --- a/packages/plasma-b2c/src/components/IconButton/IconButton.config.ts +++ b/packages/plasma-b2c/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,74 +49,74 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -85,12 +125,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 4rem; ${iconButtonTokens.iconButtonPadding}: 1.75rem; ${iconButtonTokens.iconButtonRadius}: 1rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -100,12 +140,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3.5rem; ${iconButtonTokens.iconButtonPadding}: 1.5rem; ${iconButtonTokens.iconButtonRadius}: 0.875rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -115,12 +155,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -130,12 +170,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -145,12 +185,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -163,7 +203,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-b2c/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/plasma-b2c/src/components/InformationWrapper/InformationWrapper.config.ts index 45b90809f49..8455c7077c7 100644 --- a/packages/plasma-b2c/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/plasma-b2c/src/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,18 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,50 +23,50 @@ export const config = { variations: { view: { default: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { l: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; @@ -63,29 +78,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -95,12 +110,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, m: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; @@ -112,29 +127,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -144,12 +159,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, s: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -161,29 +176,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -193,12 +208,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, xs: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; @@ -210,29 +225,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -244,10 +259,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -260,12 +275,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -284,12 +299,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; diff --git a/packages/plasma-b2c/src/components/LinkButton/LinkButton.config.ts b/packages/plasma-b2c/src/components/LinkButton/LinkButton.config.ts index 65d6cd4557f..14ee9919f4b 100644 --- a/packages/plasma-b2c/src/components/LinkButton/LinkButton.config.ts +++ b/packages/plasma-b2c/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +38,70 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, }, size: { @@ -79,12 +109,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 4rem; ${linkButtonTokens.linkButtonPadding}: 1.25rem 0; ${linkButtonTokens.linkButtonRadius}: 1rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.5rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -98,12 +128,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3.5rem; ${linkButtonTokens.linkButtonPadding}: 1rem 0; ${linkButtonTokens.linkButtonRadius}: 0.875rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -117,12 +147,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -136,12 +166,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -155,12 +185,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -174,12 +204,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 1.5rem; ${linkButtonTokens.linkButtonPadding}: 0.375rem 0; ${linkButtonTokens.linkButtonRadius}: 0.375rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 0.75rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/plasma-b2c/src/components/List/List.config.ts b/packages/plasma-b2c/src/components/List/List.config.ts index b0a7acc37b0..88cbba4349d 100644 --- a/packages/plasma-b2c/src/components/List/List.config.ts +++ b/packages/plasma-b2c/src/components/List/List.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +17,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +38,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${listTokens.listItemFontFamily}: ${bodyXS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyXS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyXS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyXS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${listTokens.listItemPaddingTop}: 0.689rem; @@ -46,12 +55,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -63,12 +72,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -80,12 +89,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, xl: css` ${listTokens.listItemPaddingTop}: 1.3125rem; @@ -97,12 +106,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-b2c/src/components/Loader/Loader.config.ts b/packages/plasma-b2c/src/components/Loader/Loader.config.ts index 25fef650be1..0826d08735d 100644 --- a/packages/plasma-b2c/src/components/Loader/Loader.config.ts +++ b/packages/plasma-b2c/src/components/Loader/Loader.config.ts @@ -1,3 +1,30 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + overlaySoft, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, loaderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +35,67 @@ export const config = { variations: { view: { default: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-solid-default); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceSolidDefault}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-primary); + ${loaderTokens.spinnerColor}: ${textPrimary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, secondary: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceTransparentSecondary}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-secondary); + ${loaderTokens.spinnerColor}: ${textSecondary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, accent: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-accent); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceAccent}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-accent); + ${loaderTokens.spinnerColor}: ${textAccent}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, positive: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-positive); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfacePositive}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-positive); + ${loaderTokens.spinnerColor}: ${textPositive}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, warning: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-warning); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceWarning}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-warning); + ${loaderTokens.spinnerColor}: ${textWarning}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, negative: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-negative); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceNegative}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-negative); + ${loaderTokens.spinnerColor}: ${textNegative}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, info: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-info); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceInfo}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-info); + ${loaderTokens.spinnerColor}: ${textInfo}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, }, size: { @@ -81,12 +108,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 8rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h2.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h2.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h2.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h2Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h2.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h2.lineHeight}; ${loaderTokens.spinnerSize}: 8rem; `, @@ -99,12 +126,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 5.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h5.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h5.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h5.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h5Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h5.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h5.lineHeight}; ${loaderTokens.spinnerSize}: 5.5rem; `, @@ -117,12 +144,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyL.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyL.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyL.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyL.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyL.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyL.lineHeight}; ${loaderTokens.spinnerSize}: 3.5rem; `, @@ -135,12 +162,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyM.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyM.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyM.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyM.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyM.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyM.lineHeight}; ${loaderTokens.spinnerSize}: 3rem; `, @@ -153,12 +180,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 2.25rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyS.lineHeight}; ${loaderTokens.spinnerSize}: 2.25rem; `, @@ -171,12 +198,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXS.lineHeight}; ${loaderTokens.spinnerSize}: 1.5rem; `, @@ -189,12 +216,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXXS.lineHeight}; ${loaderTokens.spinnerSize}: 1rem; `, diff --git a/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts b/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts index fd0a3ff9c73..0a4780c8e29 100644 --- a/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts +++ b/packages/plasma-b2c/src/components/ModalBase/Modal.config.ts @@ -1,3 +1,12 @@ +import { + overlayBlur, + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,17 +16,17 @@ export const config = { variations: { view: { default: css` - ${modalTokens.modalOverlayWithBlurColor}: var(--overlay-blur); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayWithBlurColor}: ${overlayBlur}; + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Note/Note.config.ts b/packages/plasma-b2c/src/components/Note/Note.config.ts index 76e6e79ff13..956fe100fe7 100644 --- a/packages/plasma-b2c/src/components/Note/Note.config.ts +++ b/packages/plasma-b2c/src/components/Note/Note.config.ts @@ -1,3 +1,25 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textL, + textLBold, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textSecondary, + textSecondaryHover, + textWarning, + textXS, + textXSBold, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +30,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -44,8 +66,8 @@ export const config = { ${tokens.closeIconTop}: 1rem; ${tokens.closeIconRight}: 1rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -53,20 +75,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 2rem; ${tokens.fixedContentBeforePadding}: 0.25rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.titleFontFamily}: ${textL.fontFamily}; + ${tokens.titleFontSize}: ${textL.fontSize}; + ${tokens.titleFontStyle}: ${textL.fontStyle}; + ${tokens.titleFontWeight}: ${textLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textL.letterSpacing}; + ${tokens.titleLineHeight}: ${textL.lineHeight}; ${tokens.titlePaddingRight}: 1.875rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.textFontFamily}: ${textL.fontFamily}; + ${tokens.textFontSize}: ${textL.fontSize}; + ${tokens.textFontStyle}: ${textL.fontStyle}; + ${tokens.textFontWeight}: ${textL.fontWeight}; + ${tokens.textLetterSpacing}: ${textL.letterSpacing}; + ${tokens.textLineHeight}: ${textL.lineHeight}; `, m: css` ${tokens.padding}: 1.25rem 1.5rem; @@ -78,8 +100,8 @@ export const config = { ${tokens.closeIconTop}: 0.75rem; ${tokens.closeIconRight}: 0.75rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -87,20 +109,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; ${tokens.titlePaddingRight}: 1.75rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -112,8 +134,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -121,20 +143,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.titleFontFamily}: ${textS.fontFamily}; + ${tokens.titleFontSize}: ${textS.fontSize}; + ${tokens.titleFontStyle}: ${textS.fontStyle}; + ${tokens.titleFontWeight}: ${textSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; + ${tokens.titleLineHeight}: ${textS.lineHeight}; ${tokens.titlePaddingRight}: 1.625rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.textFontFamily}: ${textS.fontFamily}; + ${tokens.textFontSize}: ${textS.fontSize}; + ${tokens.textFontStyle}: ${textS.fontStyle}; + ${tokens.textFontWeight}: ${textS.fontWeight}; + ${tokens.textLetterSpacing}: ${textS.letterSpacing}; + ${tokens.textLineHeight}: ${textS.lineHeight}; `, xs: css` ${tokens.padding}: 0.75rem 1rem; @@ -146,8 +168,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1rem; ${tokens.closeIconButtonSize}: 1rem; @@ -155,20 +177,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.titleFontFamily}: ${textXS.fontFamily}; + ${tokens.titleFontSize}: ${textXS.fontSize}; + ${tokens.titleFontStyle}: ${textXS.fontStyle}; + ${tokens.titleFontWeight}: ${textXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.titleLineHeight}: ${textXS.lineHeight}; ${tokens.titlePaddingRight}: 1.5rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.textFontFamily}: ${textXS.fontFamily}; + ${tokens.textFontSize}: ${textXS.fontSize}; + ${tokens.textFontStyle}: ${textXS.fontStyle}; + ${tokens.textFontWeight}: ${textXS.fontWeight}; + ${tokens.textLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.textLineHeight}: ${textXS.lineHeight}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Notification/Notification.config.ts b/packages/plasma-b2c/src/components/Notification/Notification.config.ts index 8cd0bf93acc..da23ad306ee 100644 --- a/packages/plasma-b2c/src/components/Notification/Notification.config.ts +++ b/packages/plasma-b2c/src/components/Notification/Notification.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + bodySBold, + surfaceSolidCardBrightness, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +21,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-solid-card-brightness); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceSolidCardBrightness}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +53,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +107,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +161,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +215,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +269,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/plasma-b2c/src/components/NumberInput/NumberInput.config.ts b/packages/plasma-b2c/src/components/NumberInput/NumberInput.config.ts index e55e70fd713..cb9b83a0348 100644 --- a/packages/plasma-b2c/src/components/NumberInput/NumberInput.config.ts +++ b/packages/plasma-b2c/src/components/NumberInput/NumberInput.config.ts @@ -1,3 +1,40 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseSurfaceTransparentSecondary, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextTertiary, + onDarkSurfaceTransparentSecondary, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextTertiary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,26 +47,26 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-solid-default); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${inverseSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceSolidDefault}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -37,26 +74,26 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, secondary: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.iconButtonColorSolidActive}: var(--text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -64,27 +101,27 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, accent: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--inverse-text-primary); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--on-dark-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--on-dark-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-accent); - - ${tokens.iconButtonColor}: var(--on-dark-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-accent); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${inverseTextPrimary}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${onDarkTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${onDarkTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${onDarkSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceAccent}; + + ${tokens.iconButtonColor}: ${onDarkTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${onDarkTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${onDarkTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -92,25 +129,25 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, clear: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; ${tokens.backgroundColorSolid}: transparent; - ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonColor}: ${textPrimary}; ${tokens.iconButtonBackgroundColor}: transparent; - ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; ${tokens.iconButtonBackgroundColorHover}: transparent; - ${tokens.iconButtonColorActive}: var(--text-primary-active); + ${tokens.iconButtonColorActive}: ${textPrimaryActive}; ${tokens.iconButtonBackgroundColorActive}: transparent; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -125,12 +162,12 @@ export const config = { ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${tokens.iconButtonRadius}: 0.875rem; ${tokens.iconButtonSegmentationRadius}: 0.375rem; @@ -140,12 +177,12 @@ export const config = { ${tokens.textWrapperHeight}: 3.5rem; ${tokens.textWrapperPadding}: 1.063rem 1.125rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -157,12 +194,12 @@ export const config = { ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -172,12 +209,12 @@ export const config = { ${tokens.textWrapperHeight}: 3rem; ${tokens.textWrapperPadding}: 0.875rem 1rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -189,12 +226,12 @@ export const config = { ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 1rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.625rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -204,12 +241,12 @@ export const config = { ${tokens.textWrapperHeight}: 2.5rem; ${tokens.textWrapperPadding}: 0.688rem 0.875rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -221,12 +258,12 @@ export const config = { ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.75rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${tokens.iconButtonRadius}: 0.5rem; ${tokens.iconButtonSegmentationRadius}: 0.125rem; @@ -236,12 +273,12 @@ export const config = { ${tokens.textWrapperHeight}: 2rem; ${tokens.textWrapperPadding}: 0.563rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -257,8 +294,8 @@ export const config = { }, inputBackgroundType: { fill: css` - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimary}; `, clear: css` ${tokens.backgroundColor}: transparent; diff --git a/packages/plasma-b2c/src/components/Pagination/Pagination.config.ts b/packages/plasma-b2c/src/components/Pagination/Pagination.config.ts index bef9cbebe4d..7cc77e36d3a 100644 --- a/packages/plasma-b2c/src/components/Pagination/Pagination.config.ts +++ b/packages/plasma-b2c/src/components/Pagination/Pagination.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,180 +39,180 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; ${paginationTokens.inputBorderColor}:transparent; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, /** * @deprecated * использовать `default` */ primary: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); ${paginationTokens.inputBorderColor}:transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, /** * @deprecated * использовать `default` */ primary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, }, size: { l: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-l-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-l-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-l-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-l-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyL.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyL.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyL.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyLBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyL.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyL.lineHeight}; ${paginationTokens.buttonHeight}: 3.5rem; ${paginationTokens.buttonWidth}: 3rem; @@ -218,12 +248,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, m: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; @@ -259,12 +289,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; @@ -300,12 +330,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, xs: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-xs-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-xs-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-xs-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyXS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyXS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyXS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyXSBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyXS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyXS.lineHeight}; ${paginationTokens.buttonHeight}: 2rem; ${paginationTokens.paginationInputWidth}: 2.5rem; diff --git a/packages/plasma-b2c/src/components/Popover/Popover.config.ts b/packages/plasma-b2c/src/components/Popover/Popover.config.ts index 2f9acaf14e8..9139b3c63f9 100644 --- a/packages/plasma-b2c/src/components/Popover/Popover.config.ts +++ b/packages/plasma-b2c/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Progress/Progress.config.ts b/packages/plasma-b2c/src/components/Progress/Progress.config.ts index c81cf38a298..68927c915d0 100644 --- a/packages/plasma-b2c/src/components/Progress/Progress.config.ts +++ b/packages/plasma-b2c/src/components/Progress/Progress.config.ts @@ -1,3 +1,15 @@ +import { + surfaceAccent, + surfaceAccentGradient, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,44 +20,44 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, primary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, info: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-info); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceInfo}; + ${progressTokens.valueColor}: ${textTertiary}; `, success: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, error: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/plasma-b2c/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/plasma-b2c/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index 6a6449f99a4..3ae17f3287e 100644 --- a/packages/plasma-b2c/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/plasma-b2c/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +70,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -63,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -76,12 +96,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -89,12 +109,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -102,12 +122,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -115,12 +135,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -128,12 +148,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Radiobox/Radiobox.config.ts b/packages/plasma-b2c/src/components/Radiobox/Radiobox.config.ts index fedc5b71afa..f2eeb31aea6 100644 --- a/packages/plasma-b2c/src/components/Radiobox/Radiobox.config.ts +++ b/packages/plasma-b2c/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,18 +37,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,18 +60,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${radioboxTokens.margin}: 0; @@ -66,19 +82,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.625rem; ${radioboxTokens.contentTopOffset}: 0.0625rem; ${radioboxTokens.contentLeftOffset}: 0.75rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyL.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -86,83 +102,83 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${radioboxTokens.fillColor}: var(--text-primary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPrimary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated primary: css` - ${radioboxTokens.fillColor}: var(--text-primary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPrimary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${radioboxTokens.fillColor}: var(--text-secondary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textSecondary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${radioboxTokens.fillColor}: var(--text-tertiary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textTertiary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${radioboxTokens.fillColor}: var(--text-paragraph); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textParagraph}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${radioboxTokens.fillColor}: var(--text-positive); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPositive}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${radioboxTokens.fillColor}: var(--text-warning); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textWarning}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated negative: css` - ${radioboxTokens.fillColor}: var(--text-negative); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textNegative}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -173,7 +189,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Range/Range.clear.config.ts b/packages/plasma-b2c/src/components/Range/Range.clear.config.ts index 53faca3d526..a007d818229 100644 --- a/packages/plasma-b2c/src/components/Range/Range.clear.config.ts +++ b/packages/plasma-b2c/src/components/Range/Range.clear.config.ts @@ -1,3 +1,31 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -14,57 +42,57 @@ export const config = { ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); - - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldBackgroundColorHover}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -75,15 +103,15 @@ export const config = { ${tokens.textFieldBackgroundSuccessColorHover}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; `, }, size: { @@ -91,12 +119,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.5rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -104,24 +132,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -139,22 +167,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -168,12 +196,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -181,24 +209,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -216,22 +244,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -245,12 +273,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -258,24 +286,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -293,22 +321,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -322,12 +350,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -335,24 +363,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -370,22 +398,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -399,12 +427,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -412,24 +440,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -447,22 +475,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -475,10 +503,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -491,12 +519,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -515,12 +543,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -538,16 +566,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Range/Range.config.ts b/packages/plasma-b2c/src/components/Range/Range.config.ts index af1793bb835..f682f67f4d4 100644 --- a/packages/plasma-b2c/src/components/Range/Range.config.ts +++ b/packages/plasma-b2c/src/components/Range/Range.config.ts @@ -1,3 +1,32 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,55 +39,55 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorHover}: var(--surface-transparent-negative-hover); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorHover}: var(--surface-transparent-positive-hover); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -66,12 +95,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -79,24 +108,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 4rem; @@ -114,22 +143,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -142,12 +171,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -155,24 +184,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -190,22 +219,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -218,12 +247,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -231,24 +260,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -266,22 +295,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -294,12 +323,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -307,24 +336,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -342,22 +371,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -370,12 +399,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -383,24 +412,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -418,22 +447,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -445,10 +474,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -461,12 +490,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -485,12 +514,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -508,16 +537,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Rating/Rating.config.ts b/packages/plasma-b2c/src/components/Rating/Rating.config.ts index 79e9f36f886..5b42836a7a9 100644 --- a/packages/plasma-b2c/src/components/Rating/Rating.config.ts +++ b/packages/plasma-b2c/src/components/Rating/Rating.config.ts @@ -1,3 +1,36 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + bodyXXS, + bodyXXSBold, + dsplL, + dsplLBold, + dsplM, + dsplMBold, + dsplS, + dsplSBold, + h1, + h1Bold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +41,36 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; // TODO: change with token data-yellow, when it will be added to theme ${tokens.iconColor}: #F3A912; - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { l: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -48,19 +81,19 @@ export const config = { m: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -71,19 +104,19 @@ export const config = { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -94,19 +127,19 @@ export const config = { xs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.iconMarginBottom}: 0.125rem; ${tokens.contentGap}: 0.375rem; @@ -121,19 +154,19 @@ export const config = { xxs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.fontFamily}: ${bodyXXS.fontFamily}; + ${tokens.fontSize}: ${bodyXXS.fontSize}; + ${tokens.fontStyle}: ${bodyXXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.contentGap}: 0.375rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -146,19 +179,19 @@ export const config = { h1: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tokens.fontFamily}: ${h1.fontFamily}; + ${tokens.fontSize}: ${h1.fontSize}; + ${tokens.fontStyle}: ${h1.fontStyle}; + ${tokens.fontWeight}: ${h1Bold.fontWeight}; + ${tokens.letterSpacing}: ${h1.letterSpacing}; + ${tokens.lineHeight}: ${h1.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.helperTextFontFamily}: ${bodyM.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyM.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyM.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyM.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyM.lineHeight}; ${tokens.contentGap}: 1rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -177,19 +210,19 @@ export const config = { h2: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tokens.fontFamily}: ${h2.fontFamily}; + ${tokens.fontSize}: ${h2.fontSize}; + ${tokens.fontStyle}: ${h2.fontStyle}; + ${tokens.fontWeight}: ${h2Bold.fontWeight}; + ${tokens.letterSpacing}: ${h2.letterSpacing}; + ${tokens.lineHeight}: ${h2.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.875rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -208,19 +241,19 @@ export const config = { h3: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.fontFamily}: ${h3.fontFamily}; + ${tokens.fontSize}: ${h3.fontSize}; + ${tokens.fontStyle}: ${h3.fontStyle}; + ${tokens.fontWeight}: ${h3Bold.fontWeight}; + ${tokens.letterSpacing}: ${h3.letterSpacing}; + ${tokens.lineHeight}: ${h3.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.75rem; ${tokens.singleIconContentGap}: 0.375rem; @@ -239,19 +272,19 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.fontFamily}: ${h4.fontFamily}; + ${tokens.fontSize}: ${h4.fontSize}; + ${tokens.fontStyle}: ${h4.fontStyle}; + ${tokens.fontWeight}: ${h4Bold.fontWeight}; + ${tokens.letterSpacing}: ${h4.letterSpacing}; + ${tokens.lineHeight}: ${h4.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -270,19 +303,19 @@ export const config = { h5: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.fontFamily}: ${h5.fontFamily}; + ${tokens.fontSize}: ${h5.fontSize}; + ${tokens.fontStyle}: ${h5.fontStyle}; + ${tokens.fontWeight}: ${h5Bold.fontWeight}; + ${tokens.letterSpacing}: ${h5.letterSpacing}; + ${tokens.lineHeight}: ${h5.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -301,19 +334,19 @@ export const config = { h6: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tokens.fontFamily}: ${h6.fontFamily}; + ${tokens.fontSize}: ${h6.fontSize}; + ${tokens.fontStyle}: ${h6.fontStyle}; + ${tokens.fontWeight}: ${h6Bold.fontWeight}; + ${tokens.letterSpacing}: ${h6.letterSpacing}; + ${tokens.lineHeight}: ${h6.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -332,19 +365,19 @@ export const config = { displayL: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${tokens.fontFamily}: ${dsplL.fontFamily}; + ${tokens.fontSize}: ${dsplL.fontSize}; + ${tokens.fontStyle}: ${dsplL.fontStyle}; + ${tokens.fontWeight}: ${dsplLBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplL.letterSpacing}; + ${tokens.lineHeight}: ${dsplL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.helperTextFontFamily}: ${h3.fontFamily}; + ${tokens.helperTextFontSize}: ${h3.fontSize}; + ${tokens.helperTextFontStyle}: ${h3.fontStyle}; + ${tokens.helperTextFontWeight}: ${h3.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing}; + ${tokens.helperTextLineHeight}: ${h3.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -363,19 +396,19 @@ export const config = { displayM: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${tokens.fontFamily}: ${dsplM.fontFamily}; + ${tokens.fontSize}: ${dsplM.fontSize}; + ${tokens.fontStyle}: ${dsplM.fontStyle}; + ${tokens.fontWeight}: ${dsplMBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplM.letterSpacing}; + ${tokens.lineHeight}: ${dsplM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -394,19 +427,19 @@ export const config = { displayS: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${dsplS.fontFamily}; + ${tokens.fontSize}: ${dsplS.fontSize}; + ${tokens.fontStyle}: ${dsplS.fontStyle}; + ${tokens.fontWeight}: ${dsplSBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplS.letterSpacing}; + ${tokens.lineHeight}: ${dsplS.lineHeight}; + + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; diff --git a/packages/plasma-b2c/src/components/Segment/SegmentGroup.config.ts b/packages/plasma-b2c/src/components/Segment/SegmentGroup.config.ts index 5e61dd6da39..dee8bd9662b 100644 --- a/packages/plasma-b2c/src/components/Segment/SegmentGroup.config.ts +++ b/packages/plasma-b2c/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +9,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, }, size: { @@ -74,7 +75,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary}; `, }, orientation: { diff --git a/packages/plasma-b2c/src/components/Segment/SegmentItem.config.ts b/packages/plasma-b2c/src/components/Segment/SegmentItem.config.ts index 424dbd9d14f..cbec3ac6e36 100644 --- a/packages/plasma-b2c/src/components/Segment/SegmentItem.config.ts +++ b/packages/plasma-b2c/src/components/Segment/SegmentItem.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,68 +32,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -83,12 +107,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${segmentTokens.itemBorderRadius}: 0.625rem; @@ -100,12 +124,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -117,12 +141,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, l: css` ${segmentTokens.itemBorderRadius}: 0.875rem; @@ -134,12 +158,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, xl: css` ${segmentTokens.itemBorderRadius}: 1rem; @@ -151,12 +175,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-b2c/src/components/Select/Select.config.ts b/packages/plasma-b2c/src/components/Select/Select.config.ts index 8522cb0d6c0..763ae09ba4b 100644 --- a/packages/plasma-b2c/src/components/Select/Select.config.ts +++ b/packages/plasma-b2c/src/components/Select/Select.config.ts @@ -1,3 +1,75 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + onLightTextSecondaryActive, + onLightTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,348 +82,348 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, accent: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-accent); - ${tokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-accent-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceAccent}; + ${tokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, secondary: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, clear: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-active); - ${tokens.buttonBackgroundColor}: var(--surface-clear); - ${tokens.buttonBackgroundColorHover}: var(--surface-clear); - ${tokens.buttonBackgroundColorActive}: var(--surface-clear); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryActive}; + ${tokens.buttonBackgroundColor}: ${surfaceClear}; + ${tokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${tokens.buttonBackgroundColorActive}: ${surfaceClear}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, dark: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-transparent-deep); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceTransparentDeep}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceTransparentDeepHover}; + ${tokens.buttonBackgroundColorActive}:${onLightSurfaceTransparentDeepActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, black: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, white: css` - ${tokens.buttonColor}: var(--on-light-text-primary); - ${tokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-light-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-light-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-light-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-light-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-dark-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); - - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); + ${tokens.buttonColor}: ${onLightTextPrimary}; + ${tokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onLightTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onLightTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onLightTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onLightTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onDarkSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onDarkSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}:${onDarkSurfaceSolidDefaultActive}; + + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -371,20 +443,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -392,12 +464,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -420,12 +492,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; ${tokens.targetHeight}: 3.5rem; @@ -451,19 +523,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -496,20 +568,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -517,12 +589,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -545,12 +617,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -576,19 +648,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -621,20 +693,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -642,12 +714,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -670,12 +742,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; @@ -701,19 +773,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -746,20 +818,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -767,12 +839,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -795,12 +867,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2rem; @@ -826,19 +898,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -858,69 +930,69 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--on-dark-text-primary); - ${tokens.textFieldChipColorHover}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${onDarkTextPrimary}; + ${tokens.textFieldChipColorHover}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -933,12 +1005,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -957,12 +1029,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -982,12 +1054,12 @@ export const config = { true: css` ${tokens.disclosureIconOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Slider/Slider.config.ts b/packages/plasma-b2c/src/components/Slider/Slider.config.ts index c171f134490..85c4626ab7e 100644 --- a/packages/plasma-b2c/src/components/Slider/Slider.config.ts +++ b/packages/plasma-b2c/src/components/Slider/Slider.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + surfaceAccent, + surfaceAccentGradient, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +25,70 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, gradient: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent-gradient); + ${sliderTokens.fillColor}: ${surfaceAccentGradient}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, }, size: { @@ -85,24 +102,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -119,12 +136,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -136,24 +153,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -170,12 +187,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -187,24 +204,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -221,12 +238,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-b2c/src/components/Spinner/Spinner.config.ts b/packages/plasma-b2c/src/components/Spinner/Spinner.config.ts index 1519626183a..e368404536f 100644 --- a/packages/plasma-b2c/src/components/Spinner/Spinner.config.ts +++ b/packages/plasma-b2c/src/components/Spinner/Spinner.config.ts @@ -1,3 +1,13 @@ +import { + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -19,35 +29,35 @@ export const config = { }, view: { default: css` - --plasma-spinner-color: var(--text-primary); + --plasma-spinner-color: ${textPrimary}; `, /** * @deprecated * использовать `default` */ primary: css` - --plasma-spinner-color: var(--text-primary); + --plasma-spinner-color: ${textPrimary}; `, secondary: css` - --plasma-spinner-color: var(--text-secondary); + --plasma-spinner-color: ${textSecondary}; `, tertiary: css` - --plasma-spinner-color: var(--text-tertiary); + --plasma-spinner-color: ${textTertiary}; `, paragraph: css` - --plasma-spinner-color: var(--text-paragraph); + --plasma-spinner-color: ${textParagraph}; `, accent: css` - --plasma-spinner-color: var(--text-accent); + --plasma-spinner-color: ${textAccent}; `, positive: css` - --plasma-spinner-color: var(--text-positive); + --plasma-spinner-color: ${textPositive}; `, warning: css` - --plasma-spinner-color: var(--text-warning); + --plasma-spinner-color: ${textWarning}; `, negative: css` - --plasma-spinner-color: var(--text-negative); + --plasma-spinner-color: ${textNegative}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Steps/Steps.config.ts b/packages/plasma-b2c/src/components/Steps/Steps.config.ts index 7577050a5c3..7f63ff8f357 100644 --- a/packages/plasma-b2c/src/components/Steps/Steps.config.ts +++ b/packages/plasma-b2c/src/components/Steps/Steps.config.ts @@ -1,42 +1,72 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -47,10 +77,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -60,26 +90,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -100,33 +130,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.5rem; ${tokens.largeBulletIndentHeight}: 1.25rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyL.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyM.fontFamily}; + ${tokens.contentFontSize}: ${bodyM.fontSize}; + ${tokens.contentFontStyle}: ${bodyM.fontStyle}; + ${tokens.contentFontWeight}: ${bodyM.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyM.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -147,33 +177,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -194,33 +224,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -241,33 +271,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 0.75rem; ${tokens.largeBulletIndentHeight}: 0.5rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -278,8 +308,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/plasma-b2c/src/components/Switch/Switch.config.ts b/packages/plasma-b2c/src/components/Switch/Switch.config.ts index 8a08bd686d8..15ba42c4ee2 100644 --- a/packages/plasma-b2c/src/components/Switch/Switch.config.ts +++ b/packages/plasma-b2c/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,50 +24,50 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -83,17 +96,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -104,7 +117,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Table/Table.config.ts b/packages/plasma-b2c/src/components/Table/Table.config.ts index 770fa22b6d8..afa42ebe35a 100644 --- a/packages/plasma-b2c/src/components/Table/Table.config.ts +++ b/packages/plasma-b2c/src/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + surfaceTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +28,12 @@ export const config = { }, size: { l: css` - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.headerRowHeight}: 3.125rem; ${tokens.rowHeight}: 3.125rem; @@ -31,9 +43,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.5rem; ${tokens.editableCellIconButtonWidth}: 3rem; @@ -42,18 +54,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.875rem; ${tokens.editableCellInputPadding}: 0 0.75rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.75rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.875rem; @@ -63,12 +75,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -76,20 +88,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.5rem 0.875rem; ${tokens.selectControlPanelGap}: 0.5rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight}; `, m: css` - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.headerRowHeight}: 2.75rem; ${tokens.rowHeight}: 2.75rem; @@ -99,9 +111,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.375rem; ${tokens.editableCellIconButtonWidth}: 2.5rem; @@ -110,18 +122,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.625rem; ${tokens.editableCellInputPadding}: 0 0.625rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.75rem; @@ -131,12 +143,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -144,20 +156,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.75rem; ${tokens.selectControlPanelGap}: 0.625rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, s: css` - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.headerRowHeight}: 2.125rem; ${tokens.rowHeight}: 2.125rem; @@ -167,9 +179,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.25rem; ${tokens.editableCellIconButtonWidth}: 2rem; @@ -178,18 +190,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.5rem; ${tokens.editableCellInputPadding}: 0 0.375rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.25rem 0.5rem; ${tokens.buttonHeight}: 1.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.625rem; @@ -199,12 +211,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.25rem 0 0; ${tokens.selectItemIconSize}: 1rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 0.875rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -212,12 +224,12 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.5rem; ${tokens.selectControlPanelGap}: 0.25rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 8b2e20b8ce7..dd82f97a8c7 100644 --- a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,13 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,78 +18,78 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; diff --git a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index f70368f502f..b9c5c8c2ce3 100644 --- a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h1, + h2, + h3, + h4, + h5, + h6, + inverseTextPrimary, + inverseTextSecondary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,106 +34,106 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -123,12 +149,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -142,12 +168,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -161,12 +187,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -180,12 +206,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -197,12 +223,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tabsTokens.fontFamily}: ${h6.fontFamily}; + ${tabsTokens.fontSize}: ${h6.fontSize}; + ${tabsTokens.fontStyle}: ${h6.fontStyle}; + ${tabsTokens.fontWeight}: ${h6.fontWeight}; + ${tabsTokens.letterSpacing}: ${h6.letterSpacing}; + ${tabsTokens.lineHeight}: ${h6.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -214,12 +240,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -231,12 +257,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -248,12 +274,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -265,12 +291,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -282,12 +308,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 70bca47aec3..50f43b80c4c 100644 --- a/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/plasma-b2c/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +16,36 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/plasma-b2c/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/plasma-b2c/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index c1b4b62e4a1..771aca7ac0b 100644 --- a/packages/plasma-b2c/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/plasma-b2c/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/plasma-b2c/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/plasma-b2c/src/components/Tabs/vertical/VerticalTabItem.config.ts index ea83b6ddbd6..1fb761b8258 100644 --- a/packages/plasma-b2c/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/plasma-b2c/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +24,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +65,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -69,12 +85,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -89,12 +105,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -109,12 +125,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/plasma-b2c/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/plasma-b2c/src/components/Tabs/vertical/VerticalTabs.config.ts index 78eba3f047c..33ea68546ea 100644 --- a/packages/plasma-b2c/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/plasma-b2c/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/plasma-b2c/src/components/TextArea/TextArea.clear.config.ts b/packages/plasma-b2c/src/components/TextArea/TextArea.clear.config.ts index 19666cc24a7..3df85d4d72b 100644 --- a/packages/plasma-b2c/src/components/TextArea/TextArea.clear.config.ts +++ b/packages/plasma-b2c/src/components/TextArea/TextArea.clear.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -19,31 +42,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, /** * @deprecated @@ -60,31 +83,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` ${tokens.inputBackgroundColor}: transparent; @@ -97,31 +120,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-positive); - ${tokens.inputColorFocus}: var(--text-positive); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPositive}; + ${tokens.inputColorFocus}: ${textPositive}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` ${tokens.inputBackgroundColor}: transparent; @@ -134,31 +157,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-warning); - ${tokens.inputColorFocus}: var(--text-warning); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textWarning}; + ${tokens.inputColorFocus}: ${textWarning}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` ${tokens.inputBackgroundColor}: transparent; @@ -171,31 +194,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-negative); - ${tokens.inputColorFocus}: var(--text-negative); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textNegative}; + ${tokens.inputColorFocus}: ${textNegative}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -225,30 +248,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -266,12 +289,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -299,30 +322,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -340,12 +363,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -373,30 +396,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -414,12 +437,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -447,30 +470,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -488,12 +511,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -521,30 +544,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -562,24 +585,24 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; ${tokens.tooltipBoxShadow}: var( --shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08) ); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -592,12 +615,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -616,12 +639,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -639,9 +662,9 @@ export const config = { }, readOnly: { true: css` - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/plasma-b2c/src/components/TextArea/TextArea.config.ts b/packages/plasma-b2c/src/components/TextArea/TextArea.config.ts index c221c4460bd..77b64f206a6 100644 --- a/packages/plasma-b2c/src/components/TextArea/TextArea.config.ts +++ b/packages/plasma-b2c/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,41 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,218 +46,218 @@ export const config = { variations: { view: { default: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-primary); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-primary); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, /** * @deprecated * использовать `default` */ primary: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-primary); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-primary); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-positive); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-positive); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-positive); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textPositive}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-warning); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-warning); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-warning); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textWarning}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-negative); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-negative); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -248,30 +286,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -289,12 +327,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.751rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -321,30 +359,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -362,12 +400,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -394,30 +432,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -437,12 +475,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -469,30 +507,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.5rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -510,12 +548,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -542,30 +580,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.375rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -583,20 +621,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -609,12 +647,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -633,12 +671,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -652,18 +690,18 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-b2c/src/components/TextField/TextField.clear.config.ts b/packages/plasma-b2c/src/components/TextField/TextField.clear.config.ts index 31d1a8122e8..294eef53038 100644 --- a/packages/plasma-b2c/src/components/TextField/TextField.clear.config.ts +++ b/packages/plasma-b2c/src/components/TextField/TextField.clear.config.ts @@ -1,3 +1,52 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,132 +58,132 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-positive); + ${tokens.color}: ${textPositive}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-positive); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textPositive}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-positive); - ${tokens.contentSlotColorHover}: var(--text-positive-hover); - ${tokens.contentSlotColorActive}: var(--text-positive-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPositive}; + ${tokens.contentSlotColorHover}: ${textPositiveHover}; + ${tokens.contentSlotColorActive}: ${textPositiveActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-warning); + ${tokens.color}: ${textWarning}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-warning); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textWarning}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-warning); - ${tokens.contentSlotColorHover}: var(--text-warning-hover); - ${tokens.contentSlotColorActive}: var(--text-warning-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textWarning}; + ${tokens.contentSlotColorHover}: ${textWarningHover}; + ${tokens.contentSlotColorActive}: ${textWarningActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-negative); + ${tokens.color}: ${textNegative}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-negative); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textNegative}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -151,40 +200,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -200,19 +249,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -235,40 +284,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -283,12 +332,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -311,40 +360,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -359,12 +408,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -387,40 +436,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -435,12 +484,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -463,40 +512,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -511,12 +560,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -529,126 +578,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -661,12 +710,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -685,12 +734,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -709,13 +758,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); + ${tokens.colorReadOnly}: ${textPrimary}; ${tokens.backgroundColorReadOnly}: transparent; - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/plasma-b2c/src/components/TextField/TextField.config.ts b/packages/plasma-b2c/src/components/TextField/TextField.config.ts index 95ae5f84a3a..671da973b85 100644 --- a/packages/plasma-b2c/src/components/TextField/TextField.config.ts +++ b/packages/plasma-b2c/src/components/TextField/TextField.config.ts @@ -1,3 +1,56 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,120 +63,120 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-positive); - ${tokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPositive}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-warning); - ${tokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentWarning}; + ${tokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -136,20 +189,20 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -157,20 +210,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -186,19 +239,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -221,20 +274,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -242,20 +295,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -268,12 +321,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -299,20 +352,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -320,20 +373,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -346,12 +399,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -377,20 +430,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -398,20 +451,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -424,12 +477,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -455,20 +508,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -476,20 +529,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -502,12 +555,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -522,126 +575,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -654,12 +707,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -678,12 +731,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -702,13 +755,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/plasma-b2c/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/plasma-b2c/src/components/TextFieldGroup/TextFieldGroup.config.ts index 200d2e26ac4..ea17fdfec0b 100644 --- a/packages/plasma-b2c/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/plasma-b2c/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.textFieldDefaultRadius}: 0.75rem; @@ -77,28 +78,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -111,12 +112,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -133,28 +134,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -167,12 +168,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.textFieldSegmentedRadius}: 0.125rem; @@ -189,28 +190,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -223,12 +224,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts b/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts index a33164279df..5d0f5e43d10 100644 --- a/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts +++ b/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + textAccent, + textNegative, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,10 +35,10 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -25,45 +51,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -76,45 +102,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-positive); - ${tokens.textFieldContentSlotColorHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColor}: ${textPositive}; + ${tokens.textFieldContentSlotColorHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorActive}: ${textPositiveActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-positive); + ${tokens.scaleValueColor}: ${textPositive}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -127,45 +153,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -178,50 +204,50 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-negative); + ${tokens.scaleValueColor}: ${textNegative}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -235,38 +261,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -288,12 +314,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -305,38 +331,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -358,12 +384,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -375,38 +401,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -428,12 +454,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -445,38 +471,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -498,12 +524,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -515,38 +541,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -568,20 +594,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -594,12 +620,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -618,12 +644,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -641,12 +667,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.config.ts b/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.config.ts index c63635d3490..cdf3ccf05ce 100644 --- a/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.config.ts +++ b/packages/plasma-b2c/src/components/TextFieldSlider/TextFieldSlider.config.ts @@ -1,3 +1,35 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,207 +41,207 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; - ${tokens.textFieldBorderColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldBorderColorHover}: var(--text-secondary); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldBorderColorHover}: ${textSecondary}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-positive-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-warning-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -223,38 +255,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -276,12 +308,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -293,38 +325,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -346,12 +378,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -363,38 +395,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -416,12 +448,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -433,38 +465,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -486,12 +518,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -503,38 +535,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -556,20 +588,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -582,12 +614,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -606,12 +638,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -629,12 +661,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/plasma-b2c/src/components/TimePicker/TimePicker.config.ts b/packages/plasma-b2c/src/components/TimePicker/TimePicker.config.ts index b86cc9da0bd..9ca595a169e 100644 --- a/packages/plasma-b2c/src/components/TimePicker/TimePicker.config.ts +++ b/packages/plasma-b2c/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,45 +33,45 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; - ${tokens.labelColor}: var(--text-primary); + ${tokens.labelColor}: ${textPrimary}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); + ${tokens.timePickerShadow}: ${shadowDownSoftS}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -63,12 +86,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -80,12 +103,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -103,34 +126,34 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.5rem; @@ -146,12 +169,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -163,12 +186,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -186,34 +209,34 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -229,12 +252,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -246,12 +269,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -269,34 +292,34 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.813rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -312,12 +335,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -329,12 +352,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -352,34 +375,34 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -450,13 +473,13 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Toast/Toast.config.ts b/packages/plasma-b2c/src/components/Toast/Toast.config.ts index d0d7038c25b..a0bcc6afec1 100644 --- a/packages/plasma-b2c/src/components/Toast/Toast.config.ts +++ b/packages/plasma-b2c/src/components/Toast/Toast.config.ts @@ -1,3 +1,17 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,60 +23,60 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-positive); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textPositive}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-negative); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textNegative}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * использовать `default` */ primary: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary); + ${toastTokens.closeIconColor}: ${onDarkTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary); + ${toastTokens.closeIconColor}: ${onLightTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextSecondary}; `, }, size: { @@ -70,12 +84,12 @@ export const config = { ${toastTokens.borderRadius}: 0.75rem; ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/plasma-b2c/src/components/Toolbar/Toolbar.config.ts b/packages/plasma-b2c/src/components/Toolbar/Toolbar.config.ts index 89581b0d6bf..198fea34fbd 100644 --- a/packages/plasma-b2c/src/components/Toolbar/Toolbar.config.ts +++ b/packages/plasma-b2c/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/plasma-b2c/src/components/Tooltip/Tooltip.config.ts b/packages/plasma-b2c/src/components/Tooltip/Tooltip.config.ts index 2ca59cef4c5..2a818a1670a 100644 --- a/packages/plasma-b2c/src/components/Tooltip/Tooltip.config.ts +++ b/packages/plasma-b2c/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,4 @@ +import { bodyS, bodyXS, surfaceSolidCardBrightness, textPrimary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +17,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -30,7 +31,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -41,12 +42,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -55,15 +56,15 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.color}: ${textPrimary}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Tree/Tree.config.ts b/packages/plasma-b2c/src/components/Tree/Tree.config.ts index e8cbfce73a6..6247adf76cc 100644 --- a/packages/plasma-b2c/src/components/Tree/Tree.config.ts +++ b/packages/plasma-b2c/src/components/Tree/Tree.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,24 +24,24 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -53,12 +69,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.itemHeight}: 3.5rem; @@ -84,12 +100,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.itemHeight}: 3rem; @@ -115,12 +131,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -146,12 +162,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.itemHeight}: 2rem; @@ -177,12 +193,12 @@ export const config = { ${tokens.checkboxInnerSize}: 0.875rem; ${tokens.checkboxBorderRadius}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Typography/Body.config.ts b/packages/plasma-b2c/src/components/Typography/Body.config.ts index 23927fdf18c..722cd63ecde 100644 --- a/packages/plasma-b2c/src/components/Typography/Body.config.ts +++ b/packages/plasma-b2c/src/components/Typography/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Typography/Dspl.config.ts b/packages/plasma-b2c/src/components/Typography/Dspl.config.ts index 3fb1245a027..b9cb5399c31 100644 --- a/packages/plasma-b2c/src/components/Typography/Dspl.config.ts +++ b/packages/plasma-b2c/src/components/Typography/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +18,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +38,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +58,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Typography/Heading.config.ts b/packages/plasma-b2c/src/components/Typography/Heading.config.ts index 77f16729129..3d40a09e33d 100644 --- a/packages/plasma-b2c/src/components/Typography/Heading.config.ts +++ b/packages/plasma-b2c/src/components/Typography/Heading.config.ts @@ -1,3 +1,23 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, + h6, + h6Bold, + h6Medium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configH1 = { @@ -7,14 +27,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +46,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +65,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +84,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +103,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, @@ -102,14 +122,14 @@ export const configH6 = { variations: { size: { h6: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + ${typographyTokens.typoFontFamily}: ${h6.fontFamily}; + ${typographyTokens.typoFontSize}: ${h6.fontSize}; + ${typographyTokens.typoFontStyle}: ${h6.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h6.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h6Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h6Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h6.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h6.lineHeight}; `, }, }, diff --git a/packages/plasma-b2c/src/components/Typography/Text.config.ts b/packages/plasma-b2c/src/components/Typography/Text.config.ts index 542bc09a87d..0c0104fb3e6 100644 --- a/packages/plasma-b2c/src/components/Typography/Text.config.ts +++ b/packages/plasma-b2c/src/components/Typography/Text.config.ts @@ -1,3 +1,17 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +21,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +41,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +61,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +81,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, From 8b2550475387d2c32e77ed9a897e2b84e30dc2ea Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 19:49:06 +0300 Subject: [PATCH 07/24] chore(plasma-homeds): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 257 ++-- .../src/components/Attach/Attach.config.ts | 899 +++++++------- .../Autocomplete/Autocomplete.config.ts | 553 +++++---- .../src/components/Badge/Badge.config.ts | 148 ++- .../Breadcrumbs/Breadcrumbs.config.ts | 68 +- .../src/components/Button/Button.config.ts | 184 +-- .../ButtonGroup/ButtonGroup.config.ts | 197 ++-- .../components/Calendar/Calendar.config.ts | 460 ++++---- .../Calendar/CalendarDouble.config.ts | 460 ++++---- .../src/components/Card/Card.config.ts | 3 +- .../components/Carousel/Carousel.config.ts | 24 +- .../src/components/Cell/Cell.config.ts | 169 +-- .../components/Checkbox/Checkbox.config.ts | 156 +-- .../components/ChipGroup/ChipGroup.config.ts | 102 +- .../components/CodeField/CodeField.config.ts | 85 +- .../components/Combobox/Combobox.config.ts | 753 ++++++------ .../src/components/Counter/Counter.config.ts | 103 +- .../DatePicker/DatePicker.clear.config.ts | 1033 ++++++++-------- .../DatePicker/DatePicker.config.ts | 1020 ++++++++-------- .../DateTimePicker/DateTimePicker.config.ts | 954 ++++++++------- .../src/components/Divider/Divider.config.ts | 14 +- .../src/components/Drawer/Drawer.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 132 ++- .../components/Dropzone/Dropzone.config.ts | 53 +- .../EmbedIconButton/EmbedIconButton.config.ts | 125 +- .../EmptyState/EmptyState.config.ts | 49 +- .../src/components/File/File.config.ts | 158 +-- .../IconButton/IconButton.config.ts | 138 ++- .../InformationWrapper.config.ts | 295 ++--- .../LinkButton/LinkButton.config.ts | 193 +-- .../src/components/List/List.config.ts | 77 +- .../src/components/Loader/Loader.config.ts | 181 +-- .../src/components/Modal/Modal.config.ts | 20 +- .../src/components/Note/Note.config.ts | 164 +-- .../Notification/Notification.config.ts | 196 +-- .../NumberInput/NumberInput.config.ts | 289 +++-- .../Pagination/Pagination.config.ts | 220 ++-- .../src/components/Popover/Popover.config.ts | 5 +- .../components/Progress/Progress.config.ts | 60 +- .../ProgressBarCircular.config.ts | 146 ++- .../components/Radiobox/Radiobox.config.ts | 154 +-- .../components/Range/Range.clear.config.ts | 482 ++++---- .../src/components/Range/Range.config.ts | 464 ++++---- .../src/components/Rating/Rating.config.ts | 359 +++--- .../components/Scrollbar/Scrollbar.config.ts | 6 +- .../components/Segment/SegmentGroup.config.ts | 11 +- .../components/Segment/SegmentItem.config.ts | 168 +-- .../src/components/Select/Select.config.ts | 1046 +++++++++-------- .../Skeleton/LineSkeleton.config.ts | 103 +- .../src/components/Slider/Slider.config.ts | 209 ++-- .../src/components/Spinner/Spinner.config.ts | 26 +- .../src/components/Steps/Steps.config.ts | 332 +++--- .../src/components/Switch/Switch.config.ts | 103 +- .../src/components/Table/Table.config.ts | 180 +-- .../HorizontalIconTabItem.config.ts | 70 +- .../horizontal/HorizontalTabItem.config.ts | 245 ++-- .../Tabs/horizontal/HorizontalTabs.config.ts | 36 +- .../vertical/VerticalIconTabItem.config.ts | 23 +- .../Tabs/vertical/VerticalTabItem.config.ts | 90 +- .../Tabs/vertical/VerticalTabs.config.ts | 17 +- .../TextArea/TextArea.clear.config.ts | 443 +++---- .../components/TextArea/TextArea.config.ts | 642 +++++----- .../components/TextField/TextField.config.ts | 486 ++++---- .../TextFieldGroup/TextFieldGroup.config.ts | 193 +-- .../TimePicker/TimePicker.config.ts | 331 +++--- .../src/components/Toast/Toast.config.ts | 70 +- .../src/components/Toolbar/Toolbar.config.ts | 11 +- .../src/components/Tooltip/Tooltip.config.ts | 33 +- .../src/components/Tree/Tree.config.ts | 106 +- .../src/components/Typography/Body.config.ts | 97 +- .../src/components/Typography/Dspl.config.ts | 59 +- .../components/Typography/Heading.config.ts | 97 +- .../src/components/Typography/Text.config.ts | 78 +- 73 files changed, 9184 insertions(+), 7743 deletions(-) diff --git a/packages/plasma-homeds/src/components/Accordion/Accordion.config.ts b/packages/plasma-homeds/src/components/Accordion/Accordion.config.ts index 28793b613d6..db8c5a3c870 100644 --- a/packages/plasma-homeds/src/components/Accordion/Accordion.config.ts +++ b/packages/plasma-homeds/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,12 +34,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, @@ -24,14 +47,14 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -42,19 +65,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.875rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyLBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -63,19 +86,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -84,19 +107,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -105,19 +128,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXSBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.lineHeight}; `, h2: css` ${accordionTokens.accordionItemPaddingVertical}: 1rem; @@ -126,19 +149,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h2Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -147,19 +170,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 0.688rem; @@ -167,19 +190,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h5: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -187,19 +210,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Attach/Attach.config.ts b/packages/plasma-homeds/src/components/Attach/Attach.config.ts index b62ab061eec..cda1d4b3e94 100644 --- a/packages/plasma-homeds/src/components/Attach/Attach.config.ts +++ b/packages/plasma-homeds/src/components/Attach/Attach.config.ts @@ -1,3 +1,54 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,439 +61,439 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.buttonColorActive}: var(--text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.buttonColorHover}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.buttonColorActive}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.iconButtonColorHover}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.iconButtonColorActive}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary-hover); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.buttonColorActive}: var(--text-primary-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColorHover}: ${textPrimaryHover}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.buttonColorActive}: ${textPrimaryActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary-hover); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonColorActive}: var(--text-primary-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonColorActive}: ${textPrimaryActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, success: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-positive); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfacePositive}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, warning: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-warning); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceWarning}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, critical: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-negative); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceNegative}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-negative-active); - - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; + + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, dark: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, black: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, white: css` - ${attachTokens.buttonColor}: var(--on-light-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.buttonColor}: ${onLightTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -457,12 +508,12 @@ export const config = { ${attachTokens.buttonWidth}: 12.5rem; ${attachTokens.buttonPadding}: 1.5rem; ${attachTokens.buttonRadius}: 0.875rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyL.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -481,37 +532,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonHeight}: 3.5rem; ${attachTokens.iconButtonWidth}: 3.5rem; ${attachTokens.iconButtonPadding}: 1.5rem; ${attachTokens.iconButtonRadius}: 0.875rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -520,12 +571,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -547,12 +598,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -571,37 +622,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -610,12 +661,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -637,12 +688,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -661,37 +712,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -700,12 +751,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -727,12 +778,12 @@ export const config = { ${attachTokens.buttonWidth}: 10rem; ${attachTokens.buttonPadding}: 0.75rem; ${attachTokens.buttonRadius}: 0.5rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -751,37 +802,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.25rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2rem; ${attachTokens.iconButtonWidth}: 2rem; ${attachTokens.iconButtonPadding}: 0.75rem; ${attachTokens.iconButtonRadius}: 0.5rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -790,12 +841,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/plasma-homeds/src/components/Autocomplete/Autocomplete.config.ts b/packages/plasma-homeds/src/components/Autocomplete/Autocomplete.config.ts index 445f4504839..fef933b6816 100644 --- a/packages/plasma-homeds/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/plasma-homeds/src/components/Autocomplete/Autocomplete.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,172 +40,172 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-positive); - ${tokens.textFieldDividerColorHover}: var(--surface-positive); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfacePositive}; + ${tokens.textFieldDividerColorHover}: ${surfacePositive}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-warning); - ${tokens.textFieldDividerColorHover}: var(--surface-warning); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceWarning}; + ${tokens.textFieldDividerColorHover}: ${surfaceWarning}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--surface-negative); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${surfaceNegative}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, }, size: { @@ -193,21 +224,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -215,12 +246,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -240,12 +271,12 @@ export const config = { ${tokens.itemPadding}: 1.0625rem 1rem; ${tokens.itemBorderRadius}: 0.75rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; ${tokens.emptyStateGap}: 0.5rem; @@ -268,21 +299,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -290,12 +321,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -315,12 +346,12 @@ export const config = { ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; ${tokens.emptyStateGap}: 0.375rem; @@ -343,21 +374,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -365,12 +396,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -390,12 +421,12 @@ export const config = { ${tokens.itemPadding}: 0.6875rem 0.75rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -418,21 +449,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -440,12 +471,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -465,12 +496,12 @@ export const config = { ${tokens.itemPadding}: 0.5625rem 0.5rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; ${tokens.emptyStateGap}: 0.25rem; @@ -481,22 +512,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -509,12 +540,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -533,12 +564,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -556,14 +587,14 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Badge/Badge.config.ts b/packages/plasma-homeds/src/components/Badge/Badge.config.ts index 3d8e8df196e..42f8fbc19d2 100644 --- a/packages/plasma-homeds/src/components/Badge/Badge.config.ts +++ b/packages/plasma-homeds/src/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +36,67 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -78,12 +106,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -97,12 +125,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -116,12 +144,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -135,12 +163,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -159,7 +187,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/plasma-homeds/src/components/Breadcrumbs/Breadcrumbs.config.ts index 1661a5df0e3..26f61a12521 100644 --- a/packages/plasma-homeds/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/plasma-homeds/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,53 +20,53 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { l: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.5rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-l-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-l-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-l-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-l-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-l-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight}; `, m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${breadcrumbsTokens.breadcrumbsGap}: 0rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-xs-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-xs-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-xs-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-xs-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-xs-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Button/Button.config.ts b/packages/plasma-homeds/src/components/Button/Button.config.ts index 0131982eec2..1c4bc16e278 100644 --- a/packages/plasma-homeds/src/components/Button/Button.config.ts +++ b/packages/plasma-homeds/src/components/Button/Button.config.ts @@ -1,3 +1,37 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceSolidSecondaryActive, + surfaceSolidSecondaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,81 +43,81 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, negative: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-secondary); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-solid-secondary-hover); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidSecondary}; + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceSolidSecondaryHover}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-solid-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-solid-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceSolidSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceSolidSecondaryActive}; `, }, size: { @@ -92,12 +126,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 1rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -113,12 +147,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -134,12 +168,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -158,7 +192,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/plasma-homeds/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/plasma-homeds/src/components/ButtonGroup/ButtonGroup.config.ts index ff0cd55a269..7738add5f84 100644 --- a/packages/plasma-homeds/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/plasma-homeds/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,38 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceSolidSecondaryActive, + surfaceSolidSecondaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,88 +43,88 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, negative: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidSecondaryActive}; `, }, size: { @@ -101,12 +136,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -115,12 +150,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -129,12 +164,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/plasma-homeds/src/components/Calendar/Calendar.config.ts b/packages/plasma-homeds/src/components/Calendar/Calendar.config.ts index fc0a15388db..891f0704f3d 100644 --- a/packages/plasma-homeds/src/components/Calendar/Calendar.config.ts +++ b/packages/plasma-homeds/src/components/Calendar/Calendar.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,38 +35,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -51,46 +77,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +126,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 4rem; ${calendarBaseTokens.iconButtonWidth}: 4rem; @@ -120,46 +146,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -169,13 +195,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3.5rem; ${calendarBaseTokens.iconButtonWidth}: 3.5rem; @@ -189,46 +215,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -238,13 +264,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -258,46 +284,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -307,13 +333,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -327,46 +353,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -376,13 +402,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; @@ -400,12 +426,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -414,7 +440,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -425,12 +451,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -439,7 +465,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Calendar/CalendarDouble.config.ts b/packages/plasma-homeds/src/components/Calendar/CalendarDouble.config.ts index 70c9a8be880..79271aa3306 100644 --- a/packages/plasma-homeds/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-homeds/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,39 +35,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -52,46 +78,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +127,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 4rem; ${calendarDoubleTokens.iconButtonWidth}: 4rem; @@ -121,46 +147,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -170,13 +196,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; @@ -190,46 +216,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -239,13 +265,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -259,46 +285,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -308,13 +334,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -328,46 +354,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +403,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; @@ -401,12 +427,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -415,7 +441,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -426,12 +452,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -440,7 +466,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Card/Card.config.ts b/packages/plasma-homeds/src/components/Card/Card.config.ts index 2899613fb13..c792ddce1ce 100644 --- a/packages/plasma-homeds/src/components/Card/Card.config.ts +++ b/packages/plasma-homeds/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,7 +9,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/plasma-homeds/src/components/Carousel/Carousel.config.ts b/packages/plasma-homeds/src/components/Carousel/Carousel.config.ts index f3fd82e4491..2186b625d71 100644 --- a/packages/plasma-homeds/src/components/Carousel/Carousel.config.ts +++ b/packages/plasma-homeds/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +16,14 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary); - ${tokens.paginationDotActiveBackground}: var(--surface-solid-default); - ${tokens.controlIconButtonColor}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.controlIconButtonColorHover}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.controlIconButtonColorActive}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary}; + ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault}; + ${tokens.controlIconButtonColor}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.controlIconButtonColorHover}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.controlIconButtonColorActive}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, }, size: { diff --git a/packages/plasma-homeds/src/components/Cell/Cell.config.ts b/packages/plasma-homeds/src/components/Cell/Cell.config.ts index 6588088c11f..2999dd81b8a 100644 --- a/packages/plasma-homeds/src/components/Cell/Cell.config.ts +++ b/packages/plasma-homeds/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -87,26 +88,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -119,26 +120,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Checkbox/Checkbox.config.ts b/packages/plasma-homeds/src/components/Checkbox/Checkbox.config.ts index 53d71aca8ad..d6e64b066db 100644 --- a/packages/plasma-homeds/src/components/Checkbox/Checkbox.config.ts +++ b/packages/plasma-homeds/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,18 +33,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -39,18 +55,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${checkboxTokens.margin}: 0; @@ -60,91 +76,91 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.125rem; ${checkboxTokens.contentTopOffset}: 0.0625rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyL.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${checkboxTokens.fillColor}: var(--text-primary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPrimary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${checkboxTokens.fillColor}: var(--text-secondary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textSecondary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${checkboxTokens.fillColor}: var(--text-tertiary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textTertiary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${checkboxTokens.fillColor}: var(--text-paragraph); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textParagraph}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${checkboxTokens.fillColor}: var(--text-positive); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPositive}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${checkboxTokens.fillColor}: var(--text-warning); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textWarning}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, negative: css` - ${checkboxTokens.fillColor}: var(--text-negative); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textNegative}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-negative); + ${checkboxTokens.triggerBorderColor}: ${textNegative}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -155,7 +171,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/plasma-homeds/src/components/ChipGroup/ChipGroup.config.ts b/packages/plasma-homeds/src/components/ChipGroup/ChipGroup.config.ts index 2bed06ad8c0..42bf8618e7c 100644 --- a/packages/plasma-homeds/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/plasma-homeds/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +26,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +57,12 @@ export const config = { ${tokens.chipHeight}: 3rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.5rem; @@ -60,12 +78,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -81,12 +99,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; @@ -102,12 +120,12 @@ export const config = { ${tokens.chipHeight}: 1.5rem; ${tokens.chipPadding}: 0 0.625rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/plasma-homeds/src/components/CodeField/CodeField.config.ts b/packages/plasma-homeds/src/components/CodeField/CodeField.config.ts index d0109404d66..aca17ec5f18 100644 --- a/packages/plasma-homeds/src/components/CodeField/CodeField.config.ts +++ b/packages/plasma-homeds/src/components/CodeField/CodeField.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodyXS, + outlineAccent, + surfaceAccent, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, codeFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,19 +26,19 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--surface-accent); + ${tokens.caretColor}: ${surfaceAccent}; - ${tokens.captionColor}: var(--text-secondary); - ${tokens.captionColorError}: var(--text-negative); + ${tokens.captionColor}: ${textSecondary}; + ${tokens.captionColorError}: ${textNegative}; - ${tokens.codeColor}: var(--text-primary); - ${tokens.codeColorError}: var(--text-negative); - ${tokens.borderColorFocus}: var(--outline-accent); + ${tokens.codeColor}: ${textPrimary}; + ${tokens.codeColorError}: ${textNegative}; + ${tokens.borderColorFocus}: ${outlineAccent}; - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; `, }, size: { @@ -34,19 +51,19 @@ export const config = { ${tokens.codeItemWidth}: 2.75rem; ${tokens.codeItemHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.captionFontFamily}: ${bodyS.fontFamily}; + ${tokens.captionFontSize}: ${bodyS.fontSize}; + ${tokens.captionFontStyle}: ${bodyS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyS.lineHeight}; ${tokens.borderRadius}: 0.875rem; ${tokens.borderRadiusSegmented}: 0.375rem; @@ -61,19 +78,19 @@ export const config = { ${tokens.codeItemWidth}: 2.375rem; ${tokens.codeItemHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.captionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.captionFontSize}: ${bodyXS.fontSize}; + ${tokens.captionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyXS.lineHeight}; ${tokens.borderRadius}: 0.75rem; ${tokens.borderRadiusSegmented}: 0.25rem; diff --git a/packages/plasma-homeds/src/components/Combobox/Combobox.config.ts b/packages/plasma-homeds/src/components/Combobox/Combobox.config.ts index 9b023838c5d..97b7ff4663a 100644 --- a/packages/plasma-homeds/src/components/Combobox/Combobox.config.ts +++ b/packages/plasma-homeds/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,221 +40,221 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -243,20 +274,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -264,12 +295,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -292,12 +323,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 1rem; ${tokens.padding}: 0.125rem; @@ -319,19 +350,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -364,20 +395,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -385,12 +416,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -413,12 +444,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -440,19 +471,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -485,20 +516,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -506,12 +537,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -534,12 +565,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 0.625rem 0.875rem 0.625rem 0.875rem; ${tokens.padding}: 0.125rem; @@ -561,19 +592,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -606,20 +637,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -627,12 +658,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -655,12 +686,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 0.5rem 0.625rem 0.5rem 0.625rem; ${tokens.padding}: 0.125rem; @@ -682,19 +713,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -714,22 +745,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -742,12 +773,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -766,12 +797,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -789,13 +820,13 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Counter/Counter.config.ts b/packages/plasma-homeds/src/components/Counter/Counter.config.ts index 140aa43a57f..c7f211fceeb 100644 --- a/packages/plasma-homeds/src/components/Counter/Counter.config.ts +++ b/packages/plasma-homeds/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,32 +23,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -41,56 +56,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/plasma-homeds/src/components/DatePicker/DatePicker.clear.config.ts b/packages/plasma-homeds/src/components/DatePicker/DatePicker.clear.config.ts index 11d25b1d2f4..70e2293289c 100644 --- a/packages/plasma-homeds/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/plasma-homeds/src/components/DatePicker/DatePicker.clear.config.ts @@ -1,3 +1,46 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,63 +51,63 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); + ${tokens.outlineFocusColor}: ${surfaceAccent}; ${tokens.background}: transparent; ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.focusColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.focusColor}: ${textAccent}; ${tokens.textFieldBackgroundColor}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -73,76 +116,76 @@ export const config = { ${tokens.textFieldBackgroundSuccessColor}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -151,12 +194,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -166,12 +209,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -197,30 +240,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}:0.82rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; @@ -238,46 +281,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -288,25 +331,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -317,12 +360,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -332,12 +375,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -363,30 +406,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -404,46 +447,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -454,25 +497,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -483,12 +526,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -498,12 +541,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -529,30 +572,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -570,46 +613,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -620,25 +663,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -649,12 +692,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -664,12 +707,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.375rem; @@ -695,30 +738,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -736,46 +779,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -786,25 +829,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -815,12 +858,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -830,12 +873,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.375rem; @@ -861,30 +904,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -902,46 +945,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -952,25 +995,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -987,12 +1030,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1001,7 +1044,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1012,12 +1055,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1026,15 +1069,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1047,12 +1090,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1071,12 +1114,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1095,15 +1138,15 @@ export const config = { readOnly: { true: css` ${tokens.backgroundReadOnly}: transparent; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/plasma-homeds/src/components/DatePicker/DatePicker.config.ts b/packages/plasma-homeds/src/components/DatePicker/DatePicker.config.ts index 086a332c9ef..2d04a9ca178 100644 --- a/packages/plasma-homeds/src/components/DatePicker/DatePicker.config.ts +++ b/packages/plasma-homeds/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,109 +51,109 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -120,12 +162,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -135,12 +177,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -164,30 +206,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -205,46 +247,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -255,25 +297,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -284,12 +326,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -299,12 +341,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -329,30 +371,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -370,46 +412,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -420,25 +462,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -449,12 +491,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -464,12 +506,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -494,30 +536,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -535,46 +577,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -585,25 +627,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -614,12 +656,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -629,12 +671,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.375rem; @@ -659,30 +701,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -700,46 +742,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -750,25 +792,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -779,12 +821,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -794,12 +836,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.375rem; @@ -824,30 +866,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -865,46 +907,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -915,25 +957,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -950,12 +992,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -964,7 +1006,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -975,12 +1017,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -989,15 +1031,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1010,12 +1052,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1034,12 +1076,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1057,16 +1099,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/plasma-homeds/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/plasma-homeds/src/components/DateTimePicker/DateTimePicker.config.ts index 6ac3406a0e3..ea0784ce810 100644 --- a/packages/plasma-homeds/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/plasma-homeds/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,91 +52,91 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -113,30 +155,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -146,12 +188,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -168,46 +210,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.875rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.875rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.875rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -218,13 +260,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; @@ -237,21 +279,21 @@ export const config = { ${tokens.timePickerItemHeight}: 4rem; ${tokens.timePickerItemBorderRadius}: 0.875rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -272,30 +314,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -305,12 +347,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -327,46 +369,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +419,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; @@ -396,21 +438,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3.5rem; ${tokens.timePickerItemBorderRadius}: 0.75rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -431,30 +473,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +506,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -486,46 +528,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -536,13 +578,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; @@ -555,21 +597,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3rem; ${tokens.timePickerItemBorderRadius}: 0.625rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyM.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyM.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyM.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -590,30 +632,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -623,12 +665,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -645,46 +687,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -695,13 +737,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -714,21 +756,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -749,30 +791,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -782,12 +824,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -804,46 +846,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -854,13 +896,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -873,21 +915,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -962,12 +1004,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -976,7 +1018,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -987,12 +1029,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1001,7 +1043,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -1011,12 +1053,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/plasma-homeds/src/components/Divider/Divider.config.ts b/packages/plasma-homeds/src/components/Divider/Divider.config.ts index df0449d5c06..c13f8ca26a9 100644 --- a/packages/plasma-homeds/src/components/Divider/Divider.config.ts +++ b/packages/plasma-homeds/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/plasma-homeds/src/components/Drawer/Drawer.config.ts b/packages/plasma-homeds/src/components/Drawer/Drawer.config.ts index b0b00b15040..87d4f510473 100644 --- a/packages/plasma-homeds/src/components/Drawer/Drawer.config.ts +++ b/packages/plasma-homeds/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/plasma-homeds/src/components/Dropdown/Dropdown.config.ts b/packages/plasma-homeds/src/components/Dropdown/Dropdown.config.ts index f14dd28fbd7..e75abbb8305 100644 --- a/packages/plasma-homeds/src/components/Dropdown/Dropdown.config.ts +++ b/packages/plasma-homeds/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,11 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -24,12 +32,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.5rem; ${tokens.dividerMarginBottomTight}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -37,12 +45,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.padding}: 0.125rem; @@ -61,12 +69,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -74,12 +82,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.padding}: 0.125rem; @@ -98,12 +106,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -111,12 +119,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 0.125rem; @@ -135,12 +143,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -148,12 +156,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.padding}: 0.125rem; @@ -172,12 +180,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.125rem; ${tokens.dividerMarginBottomTight}: 0.125rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -185,18 +193,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Dropzone/Dropzone.config.ts b/packages/plasma-homeds/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..5866280aec4 100644 --- a/packages/plasma-homeds/src/components/Dropzone/Dropzone.config.ts +++ b/packages/plasma-homeds/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-homeds/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/plasma-homeds/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..050ff35dad1 100644 --- a/packages/plasma-homeds/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/plasma-homeds/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-homeds/src/components/EmptyState/EmptyState.config.ts b/packages/plasma-homeds/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..e2f0969220e 100644 --- a/packages/plasma-homeds/src/components/EmptyState/EmptyState.config.ts +++ b/packages/plasma-homeds/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-homeds/src/components/File/File.config.ts b/packages/plasma-homeds/src/components/File/File.config.ts index 455a87f891b..bd15b630f69 100644 --- a/packages/plasma-homeds/src/components/File/File.config.ts +++ b/packages/plasma-homeds/src/components/File/File.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, fileTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +24,36 @@ export const config = { variations: { view: { default: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-secondary); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textSecondary}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-solid-default); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; `, negative: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-negative); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textNegative}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-negative); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceNegative}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-negative); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceNegative}; `, }, size: { @@ -52,19 +68,19 @@ export const config = { ${tokens.cellGap}: 0.75rem; ${tokens.cellPaddingRightContent}: 0.75rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -94,19 +110,19 @@ export const config = { ${tokens.cellGap}: 0.625rem; ${tokens.cellPaddingRightContent}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -136,19 +152,19 @@ export const config = { ${tokens.cellGap}: 0.5rem; ${tokens.cellPaddingRightContent}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -178,19 +194,19 @@ export const config = { ${tokens.cellGap}: 0.375rem; ${tokens.cellPaddingRightContent}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 24; ${tokens.progressBarCircularHeight}: 1.5rem; diff --git a/packages/plasma-homeds/src/components/IconButton/IconButton.config.ts b/packages/plasma-homeds/src/components/IconButton/IconButton.config.ts index f584df594e8..a4f59452a87 100644 --- a/packages/plasma-homeds/src/components/IconButton/IconButton.config.ts +++ b/packages/plasma-homeds/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,35 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfaceSolidDefault, + surfaceSolidSecondary, + surfaceSolidSecondaryActive, + surfaceSolidSecondaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +41,53 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, negative: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-solid-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-solid-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceSolidSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceSolidSecondaryActive}; `, }, size: { @@ -64,12 +96,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3.5rem; ${iconButtonTokens.iconButtonPadding}: 1.5rem; ${iconButtonTokens.iconButtonRadius}: 50%; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -79,12 +111,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 50%; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -94,12 +126,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 50%; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -109,12 +141,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 50%; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -127,7 +159,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-homeds/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/plasma-homeds/src/components/InformationWrapper/InformationWrapper.config.ts index 45b90809f49..6a95bed1642 100644 --- a/packages/plasma-homeds/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/plasma-homeds/src/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,18 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,50 +23,50 @@ export const config = { variations: { view: { default: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { l: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; @@ -63,29 +78,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -95,12 +110,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, m: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; @@ -112,29 +127,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -144,12 +159,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, s: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -161,29 +176,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -193,12 +208,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, xs: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; @@ -210,29 +225,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -244,10 +259,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -260,12 +275,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -284,12 +299,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; diff --git a/packages/plasma-homeds/src/components/LinkButton/LinkButton.config.ts b/packages/plasma-homeds/src/components/LinkButton/LinkButton.config.ts index 413124e6aa8..6b9aa35af21 100644 --- a/packages/plasma-homeds/src/components/LinkButton/LinkButton.config.ts +++ b/packages/plasma-homeds/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,81 +39,81 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, info: css` - ${linkButtonTokens.linkButtonColor}: var(--text-info); - ${linkButtonTokens.linkButtonIconColor}: var(--text-info); - ${linkButtonTokens.linkButtonTextColor}: var(--text-info); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-info-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-info-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-info-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-info-active); + ${linkButtonTokens.linkButtonColor}: ${textInfo}; + ${linkButtonTokens.linkButtonIconColor}: ${textInfo}; + ${linkButtonTokens.linkButtonTextColor}: ${textInfo}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textInfoHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textInfoActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textInfoHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textInfoActive}; `, }, size: { @@ -90,12 +121,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -109,12 +140,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -128,12 +159,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/plasma-homeds/src/components/List/List.config.ts b/packages/plasma-homeds/src/components/List/List.config.ts index b0a7acc37b0..93ee0fb92df 100644 --- a/packages/plasma-homeds/src/components/List/List.config.ts +++ b/packages/plasma-homeds/src/components/List/List.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +17,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +38,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${listTokens.listItemFontFamily}: ${bodyXS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyXS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyXS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyXS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${listTokens.listItemPaddingTop}: 0.689rem; @@ -46,12 +55,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -63,12 +72,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -80,12 +89,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, xl: css` ${listTokens.listItemPaddingTop}: 1.3125rem; @@ -97,12 +106,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-homeds/src/components/Loader/Loader.config.ts b/packages/plasma-homeds/src/components/Loader/Loader.config.ts index 25fef650be1..68c3b6c4972 100644 --- a/packages/plasma-homeds/src/components/Loader/Loader.config.ts +++ b/packages/plasma-homeds/src/components/Loader/Loader.config.ts @@ -1,3 +1,30 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + overlaySoft, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, loaderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +35,67 @@ export const config = { variations: { view: { default: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-solid-default); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceSolidDefault}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-primary); + ${loaderTokens.spinnerColor}: ${textPrimary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, secondary: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceTransparentSecondary}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-secondary); + ${loaderTokens.spinnerColor}: ${textSecondary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, accent: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-accent); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceAccent}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-accent); + ${loaderTokens.spinnerColor}: ${textAccent}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, positive: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-positive); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfacePositive}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-positive); + ${loaderTokens.spinnerColor}: ${textPositive}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, warning: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-warning); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceWarning}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-warning); + ${loaderTokens.spinnerColor}: ${textWarning}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, negative: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-negative); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceNegative}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-negative); + ${loaderTokens.spinnerColor}: ${textNegative}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, info: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-info); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceInfo}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-info); + ${loaderTokens.spinnerColor}: ${textInfo}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, }, size: { @@ -81,12 +108,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 8rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h2.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h2.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h2.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h2Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h2.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h2.lineHeight}; ${loaderTokens.spinnerSize}: 8rem; `, @@ -99,12 +126,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 5.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h5.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h5.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h5.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h5Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h5.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h5.lineHeight}; ${loaderTokens.spinnerSize}: 5.5rem; `, @@ -117,12 +144,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyL.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyL.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyL.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyL.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyL.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyL.lineHeight}; ${loaderTokens.spinnerSize}: 3.5rem; `, @@ -135,12 +162,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyM.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyM.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyM.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyM.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyM.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyM.lineHeight}; ${loaderTokens.spinnerSize}: 3rem; `, @@ -153,12 +180,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 2.25rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyS.lineHeight}; ${loaderTokens.spinnerSize}: 2.25rem; `, @@ -171,12 +198,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXS.lineHeight}; ${loaderTokens.spinnerSize}: 1.5rem; `, @@ -189,12 +216,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXXS.lineHeight}; ${loaderTokens.spinnerSize}: 1rem; `, diff --git a/packages/plasma-homeds/src/components/Modal/Modal.config.ts b/packages/plasma-homeds/src/components/Modal/Modal.config.ts index 8b107b98ea3..eab7c260e74 100644 --- a/packages/plasma-homeds/src/components/Modal/Modal.config.ts +++ b/packages/plasma-homeds/src/components/Modal/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,16 +16,16 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Note/Note.config.ts b/packages/plasma-homeds/src/components/Note/Note.config.ts index 76e6e79ff13..d492cabe431 100644 --- a/packages/plasma-homeds/src/components/Note/Note.config.ts +++ b/packages/plasma-homeds/src/components/Note/Note.config.ts @@ -1,3 +1,25 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textL, + textLBold, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textSecondary, + textSecondaryHover, + textWarning, + textXS, + textXSBold, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +30,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -44,8 +66,8 @@ export const config = { ${tokens.closeIconTop}: 1rem; ${tokens.closeIconRight}: 1rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -53,20 +75,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 2rem; ${tokens.fixedContentBeforePadding}: 0.25rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.titleFontFamily}: ${textL.fontFamily}; + ${tokens.titleFontSize}: ${textL.fontSize}; + ${tokens.titleFontStyle}: ${textL.fontStyle}; + ${tokens.titleFontWeight}: ${textLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textL.letterSpacing}; + ${tokens.titleLineHeight}: ${textL.lineHeight}; ${tokens.titlePaddingRight}: 1.875rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.textFontFamily}: ${textL.fontFamily}; + ${tokens.textFontSize}: ${textL.fontSize}; + ${tokens.textFontStyle}: ${textL.fontStyle}; + ${tokens.textFontWeight}: ${textL.fontWeight}; + ${tokens.textLetterSpacing}: ${textL.letterSpacing}; + ${tokens.textLineHeight}: ${textL.lineHeight}; `, m: css` ${tokens.padding}: 1.25rem 1.5rem; @@ -78,8 +100,8 @@ export const config = { ${tokens.closeIconTop}: 0.75rem; ${tokens.closeIconRight}: 0.75rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -87,20 +109,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; ${tokens.titlePaddingRight}: 1.75rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -112,8 +134,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -121,20 +143,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.titleFontFamily}: ${textS.fontFamily}; + ${tokens.titleFontSize}: ${textS.fontSize}; + ${tokens.titleFontStyle}: ${textS.fontStyle}; + ${tokens.titleFontWeight}: ${textSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; + ${tokens.titleLineHeight}: ${textS.lineHeight}; ${tokens.titlePaddingRight}: 1.625rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.textFontFamily}: ${textS.fontFamily}; + ${tokens.textFontSize}: ${textS.fontSize}; + ${tokens.textFontStyle}: ${textS.fontStyle}; + ${tokens.textFontWeight}: ${textS.fontWeight}; + ${tokens.textLetterSpacing}: ${textS.letterSpacing}; + ${tokens.textLineHeight}: ${textS.lineHeight}; `, xs: css` ${tokens.padding}: 0.75rem 1rem; @@ -146,8 +168,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1rem; ${tokens.closeIconButtonSize}: 1rem; @@ -155,20 +177,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.titleFontFamily}: ${textXS.fontFamily}; + ${tokens.titleFontSize}: ${textXS.fontSize}; + ${tokens.titleFontStyle}: ${textXS.fontStyle}; + ${tokens.titleFontWeight}: ${textXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.titleLineHeight}: ${textXS.lineHeight}; ${tokens.titlePaddingRight}: 1.5rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.textFontFamily}: ${textXS.fontFamily}; + ${tokens.textFontSize}: ${textXS.fontSize}; + ${tokens.textFontStyle}: ${textXS.fontStyle}; + ${tokens.textFontWeight}: ${textXS.fontWeight}; + ${tokens.textLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.textLineHeight}: ${textXS.lineHeight}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Notification/Notification.config.ts b/packages/plasma-homeds/src/components/Notification/Notification.config.ts index 3963e77e1e2..69f5ea3e9c7 100644 --- a/packages/plasma-homeds/src/components/Notification/Notification.config.ts +++ b/packages/plasma-homeds/src/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +20,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +52,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +106,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +160,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +214,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +268,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/plasma-homeds/src/components/NumberInput/NumberInput.config.ts b/packages/plasma-homeds/src/components/NumberInput/NumberInput.config.ts index e55e70fd713..e017310fab5 100644 --- a/packages/plasma-homeds/src/components/NumberInput/NumberInput.config.ts +++ b/packages/plasma-homeds/src/components/NumberInput/NumberInput.config.ts @@ -1,3 +1,40 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseSurfaceTransparentSecondary, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextTertiary, + onDarkSurfaceTransparentSecondary, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextTertiary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,26 +47,26 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-solid-default); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${inverseSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceSolidDefault}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -37,26 +74,26 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, secondary: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.iconButtonColorSolidActive}: var(--text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -64,27 +101,27 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, accent: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--inverse-text-primary); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--on-dark-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--on-dark-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-accent); - - ${tokens.iconButtonColor}: var(--on-dark-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-accent); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${inverseTextPrimary}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${onDarkTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${onDarkTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${onDarkSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceAccent}; + + ${tokens.iconButtonColor}: ${onDarkTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${onDarkTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${onDarkTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -92,25 +129,25 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, clear: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; ${tokens.backgroundColorSolid}: transparent; - ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonColor}: ${textPrimary}; ${tokens.iconButtonBackgroundColor}: transparent; - ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; ${tokens.iconButtonBackgroundColorHover}: transparent; - ${tokens.iconButtonColorActive}: var(--text-primary-active); + ${tokens.iconButtonColorActive}: ${textPrimaryActive}; ${tokens.iconButtonBackgroundColorActive}: transparent; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -125,12 +162,12 @@ export const config = { ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${tokens.iconButtonRadius}: 0.875rem; ${tokens.iconButtonSegmentationRadius}: 0.375rem; @@ -140,12 +177,12 @@ export const config = { ${tokens.textWrapperHeight}: 3.5rem; ${tokens.textWrapperPadding}: 1.063rem 1.125rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -157,12 +194,12 @@ export const config = { ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -172,12 +209,12 @@ export const config = { ${tokens.textWrapperHeight}: 3rem; ${tokens.textWrapperPadding}: 0.875rem 1rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -189,12 +226,12 @@ export const config = { ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 1rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.625rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -204,12 +241,12 @@ export const config = { ${tokens.textWrapperHeight}: 2.5rem; ${tokens.textWrapperPadding}: 0.688rem 0.875rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -221,12 +258,12 @@ export const config = { ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.75rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${tokens.iconButtonRadius}: 0.5rem; ${tokens.iconButtonSegmentationRadius}: 0.125rem; @@ -236,12 +273,12 @@ export const config = { ${tokens.textWrapperHeight}: 2rem; ${tokens.textWrapperPadding}: 0.563rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -257,8 +294,8 @@ export const config = { }, inputBackgroundType: { fill: css` - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimary}; `, clear: css` ${tokens.backgroundColor}: transparent; diff --git a/packages/plasma-homeds/src/components/Pagination/Pagination.config.ts b/packages/plasma-homeds/src/components/Pagination/Pagination.config.ts index 5b9af725836..56493947e2a 100644 --- a/packages/plasma-homeds/src/components/Pagination/Pagination.config.ts +++ b/packages/plasma-homeds/src/components/Pagination/Pagination.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,129 +39,129 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; ${paginationTokens.inputBorderColor}:transparent; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, }, size: { l: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-l-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-l-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-l-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-l-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyL.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyL.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyL.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyLBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyL.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyL.lineHeight}; ${paginationTokens.buttonHeight}: 3.5rem; ${paginationTokens.buttonWidth}: 3rem; @@ -167,12 +197,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, m: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; @@ -208,12 +238,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; @@ -249,12 +279,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, xs: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-xs-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-xs-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-xs-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyXS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyXS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyXS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyXSBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyXS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyXS.lineHeight}; ${paginationTokens.buttonHeight}: 2rem; ${paginationTokens.paginationInputWidth}: 2.5rem; diff --git a/packages/plasma-homeds/src/components/Popover/Popover.config.ts b/packages/plasma-homeds/src/components/Popover/Popover.config.ts index 2f9acaf14e8..b6f471f2c3d 100644 --- a/packages/plasma-homeds/src/components/Popover/Popover.config.ts +++ b/packages/plasma-homeds/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Progress/Progress.config.ts b/packages/plasma-homeds/src/components/Progress/Progress.config.ts index c81cf38a298..fbe8db342d0 100644 --- a/packages/plasma-homeds/src/components/Progress/Progress.config.ts +++ b/packages/plasma-homeds/src/components/Progress/Progress.config.ts @@ -1,3 +1,15 @@ +import { + surfaceAccent, + surfaceAccentGradient, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,44 +20,44 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, primary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, info: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-info); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceInfo}; + ${progressTokens.valueColor}: ${textTertiary}; `, success: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, error: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/plasma-homeds/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/plasma-homeds/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index 6a6449f99a4..3cc16cbc122 100644 --- a/packages/plasma-homeds/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/plasma-homeds/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +70,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -63,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -76,12 +96,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -89,12 +109,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -102,12 +122,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -115,12 +135,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -128,12 +148,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Radiobox/Radiobox.config.ts b/packages/plasma-homeds/src/components/Radiobox/Radiobox.config.ts index d5fc23d48b3..177a07419e3 100644 --- a/packages/plasma-homeds/src/components/Radiobox/Radiobox.config.ts +++ b/packages/plasma-homeds/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,18 +37,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,18 +60,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${radioboxTokens.margin}: 0; @@ -66,19 +82,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.625rem; ${radioboxTokens.contentTopOffset}: 0.0625rem; ${radioboxTokens.contentLeftOffset}: 0.75rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyL.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -86,74 +102,74 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${radioboxTokens.fillColor}: var(--text-primary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPrimary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${radioboxTokens.fillColor}: var(--text-secondary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textSecondary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${radioboxTokens.fillColor}: var(--text-tertiary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textTertiary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${radioboxTokens.fillColor}: var(--text-paragraph); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textParagraph}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${radioboxTokens.fillColor}: var(--text-positive); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPositive}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${radioboxTokens.fillColor}: var(--text-warning); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textWarning}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated negative: css` - ${radioboxTokens.fillColor}: var(--text-negative); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textNegative}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -164,7 +180,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Range/Range.clear.config.ts b/packages/plasma-homeds/src/components/Range/Range.clear.config.ts index 9322e8904af..f60296aec2a 100644 --- a/packages/plasma-homeds/src/components/Range/Range.clear.config.ts +++ b/packages/plasma-homeds/src/components/Range/Range.clear.config.ts @@ -1,3 +1,31 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -14,56 +42,56 @@ export const config = { ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); - - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldBackgroundColorHover}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -74,15 +102,15 @@ export const config = { ${tokens.textFieldBackgroundSuccessColorHover}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; `, }, size: { @@ -90,12 +118,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.5rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -103,24 +131,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.25rem; @@ -133,22 +161,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -162,12 +190,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -175,24 +203,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.25rem; @@ -205,22 +233,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -234,12 +262,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -247,24 +275,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.25rem; @@ -277,22 +305,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -306,12 +334,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -319,24 +347,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.25rem; @@ -349,22 +377,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -378,12 +406,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -391,24 +419,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.25rem; @@ -421,22 +449,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -449,10 +477,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -465,12 +493,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -489,12 +517,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -512,16 +540,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Range/Range.config.ts b/packages/plasma-homeds/src/components/Range/Range.config.ts index 2bdfff6a433..a8bbc2f4643 100644 --- a/packages/plasma-homeds/src/components/Range/Range.config.ts +++ b/packages/plasma-homeds/src/components/Range/Range.config.ts @@ -1,3 +1,31 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,54 +38,54 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorHover}: var(--surface-transparent-negative-hover); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorHover}: var(--surface-transparent-positive-hover); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -65,12 +93,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -78,24 +106,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; @@ -108,22 +136,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -136,12 +164,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -149,24 +177,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; @@ -179,22 +207,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -207,12 +235,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -220,24 +248,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; @@ -250,22 +278,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -278,12 +306,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -291,24 +319,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -321,22 +349,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -349,12 +377,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -362,24 +390,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; @@ -392,22 +420,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -419,10 +447,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -435,12 +463,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -459,12 +487,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -482,16 +510,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Rating/Rating.config.ts b/packages/plasma-homeds/src/components/Rating/Rating.config.ts index ad64c67e4bf..d6a982f1295 100644 --- a/packages/plasma-homeds/src/components/Rating/Rating.config.ts +++ b/packages/plasma-homeds/src/components/Rating/Rating.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + bodyXXS, + bodyXXSBold, + dsplL, + dsplLBold, + dsplM, + dsplMBold, + dsplS, + dsplSBold, + h1, + h1Bold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +39,36 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; // TODO: change with token data-yellow, when it will be added to theme ${tokens.iconColor}: #F3A912; - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { l: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -48,19 +79,19 @@ export const config = { m: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -71,19 +102,19 @@ export const config = { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -94,19 +125,19 @@ export const config = { xs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.iconMarginBottom}: 0.125rem; ${tokens.contentGap}: 0.375rem; @@ -121,19 +152,19 @@ export const config = { xxs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.fontFamily}: ${bodyXXS.fontFamily}; + ${tokens.fontSize}: ${bodyXXS.fontSize}; + ${tokens.fontStyle}: ${bodyXXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.contentGap}: 0.375rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -146,19 +177,19 @@ export const config = { h1: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tokens.fontFamily}: ${h1.fontFamily}; + ${tokens.fontSize}: ${h1.fontSize}; + ${tokens.fontStyle}: ${h1.fontStyle}; + ${tokens.fontWeight}: ${h1Bold.fontWeight}; + ${tokens.letterSpacing}: ${h1.letterSpacing}; + ${tokens.lineHeight}: ${h1.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.helperTextFontFamily}: ${bodyM.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyM.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyM.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyM.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyM.lineHeight}; ${tokens.contentGap}: 1rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -177,19 +208,19 @@ export const config = { h2: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tokens.fontFamily}: ${h2.fontFamily}; + ${tokens.fontSize}: ${h2.fontSize}; + ${tokens.fontStyle}: ${h2.fontStyle}; + ${tokens.fontWeight}: ${h2Bold.fontWeight}; + ${tokens.letterSpacing}: ${h2.letterSpacing}; + ${tokens.lineHeight}: ${h2.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.875rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -208,19 +239,19 @@ export const config = { h3: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.fontFamily}: ${h3.fontFamily}; + ${tokens.fontSize}: ${h3.fontSize}; + ${tokens.fontStyle}: ${h3.fontStyle}; + ${tokens.fontWeight}: ${h3Bold.fontWeight}; + ${tokens.letterSpacing}: ${h3.letterSpacing}; + ${tokens.lineHeight}: ${h3.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.75rem; ${tokens.singleIconContentGap}: 0.375rem; @@ -239,19 +270,19 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.fontFamily}: ${h4.fontFamily}; + ${tokens.fontSize}: ${h4.fontSize}; + ${tokens.fontStyle}: ${h4.fontStyle}; + ${tokens.fontWeight}: ${h4Bold.fontWeight}; + ${tokens.letterSpacing}: ${h4.letterSpacing}; + ${tokens.lineHeight}: ${h4.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -270,19 +301,19 @@ export const config = { h5: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.fontFamily}: ${h5.fontFamily}; + ${tokens.fontSize}: ${h5.fontSize}; + ${tokens.fontStyle}: ${h5.fontStyle}; + ${tokens.fontWeight}: ${h5Bold.fontWeight}; + ${tokens.letterSpacing}: ${h5.letterSpacing}; + ${tokens.lineHeight}: ${h5.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -301,19 +332,19 @@ export const config = { displayL: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${tokens.fontFamily}: ${dsplL.fontFamily}; + ${tokens.fontSize}: ${dsplL.fontSize}; + ${tokens.fontStyle}: ${dsplL.fontStyle}; + ${tokens.fontWeight}: ${dsplLBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplL.letterSpacing}; + ${tokens.lineHeight}: ${dsplL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.helperTextFontFamily}: ${h3.fontFamily}; + ${tokens.helperTextFontSize}: ${h3.fontSize}; + ${tokens.helperTextFontStyle}: ${h3.fontStyle}; + ${tokens.helperTextFontWeight}: ${h3.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing}; + ${tokens.helperTextLineHeight}: ${h3.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -332,19 +363,19 @@ export const config = { displayM: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${tokens.fontFamily}: ${dsplM.fontFamily}; + ${tokens.fontSize}: ${dsplM.fontSize}; + ${tokens.fontStyle}: ${dsplM.fontStyle}; + ${tokens.fontWeight}: ${dsplMBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplM.letterSpacing}; + ${tokens.lineHeight}: ${dsplM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -363,19 +394,19 @@ export const config = { displayS: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${dsplS.fontFamily}; + ${tokens.fontSize}: ${dsplS.fontSize}; + ${tokens.fontStyle}: ${dsplS.fontStyle}; + ${tokens.fontWeight}: ${dsplSBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplS.letterSpacing}; + ${tokens.lineHeight}: ${dsplS.lineHeight}; + + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; diff --git a/packages/plasma-homeds/src/components/Scrollbar/Scrollbar.config.ts b/packages/plasma-homeds/src/components/Scrollbar/Scrollbar.config.ts index 0220aa026dc..c53b5db6d9b 100644 --- a/packages/plasma-homeds/src/components/Scrollbar/Scrollbar.config.ts +++ b/packages/plasma-homeds/src/components/Scrollbar/Scrollbar.config.ts @@ -1,8 +1,10 @@ +import { surfaceTransparentPrimary, surfaceTransparentTertiary } from '@salutejs/plasma-themes/tokens/plasma_homeds'; + export const config = { view: { default: { - trackColor: 'var(--surface-transparent-primary)', - thumbColor: 'var(--surface-transparent-tertiary)', + trackColor: surfaceTransparentPrimary, + thumbColor: surfaceTransparentTertiary, }, }, size: { diff --git a/packages/plasma-homeds/src/components/Segment/SegmentGroup.config.ts b/packages/plasma-homeds/src/components/Segment/SegmentGroup.config.ts index b03cb7140c7..7a2aefe814c 100644 --- a/packages/plasma-homeds/src/components/Segment/SegmentGroup.config.ts +++ b/packages/plasma-homeds/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +9,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -74,7 +75,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary}; `, }, orientation: { diff --git a/packages/plasma-homeds/src/components/Segment/SegmentItem.config.ts b/packages/plasma-homeds/src/components/Segment/SegmentItem.config.ts index 550c948b39d..ca4ce2fdd71 100644 --- a/packages/plasma-homeds/src/components/Segment/SegmentItem.config.ts +++ b/packages/plasma-homeds/src/components/Segment/SegmentItem.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,68 +32,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -83,12 +107,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${segmentTokens.itemBorderRadius}: 0.625rem; @@ -100,12 +124,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -117,12 +141,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, l: css` ${segmentTokens.itemBorderRadius}: 0.875rem; @@ -134,12 +158,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, xl: css` ${segmentTokens.itemBorderRadius}: 1rem; @@ -151,12 +175,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-homeds/src/components/Select/Select.config.ts b/packages/plasma-homeds/src/components/Select/Select.config.ts index 8522cb0d6c0..ee9f0dfa7f3 100644 --- a/packages/plasma-homeds/src/components/Select/Select.config.ts +++ b/packages/plasma-homeds/src/components/Select/Select.config.ts @@ -1,3 +1,75 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + onLightTextSecondaryActive, + onLightTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,348 +82,348 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, accent: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-accent); - ${tokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-accent-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceAccent}; + ${tokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, secondary: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, clear: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-active); - ${tokens.buttonBackgroundColor}: var(--surface-clear); - ${tokens.buttonBackgroundColorHover}: var(--surface-clear); - ${tokens.buttonBackgroundColorActive}: var(--surface-clear); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryActive}; + ${tokens.buttonBackgroundColor}: ${surfaceClear}; + ${tokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${tokens.buttonBackgroundColorActive}: ${surfaceClear}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, dark: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-transparent-deep); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceTransparentDeep}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceTransparentDeepHover}; + ${tokens.buttonBackgroundColorActive}:${onLightSurfaceTransparentDeepActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, black: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, white: css` - ${tokens.buttonColor}: var(--on-light-text-primary); - ${tokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-light-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-light-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-light-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-light-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-dark-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); - - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); + ${tokens.buttonColor}: ${onLightTextPrimary}; + ${tokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onLightTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onLightTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onLightTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onLightTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onDarkSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onDarkSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}:${onDarkSurfaceSolidDefaultActive}; + + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -371,20 +443,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -392,12 +464,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -420,12 +492,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; ${tokens.targetHeight}: 3.5rem; @@ -451,19 +523,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -496,20 +568,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -517,12 +589,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -545,12 +617,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -576,19 +648,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -621,20 +693,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -642,12 +714,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -670,12 +742,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; @@ -701,19 +773,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -746,20 +818,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -767,12 +839,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -795,12 +867,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2rem; @@ -826,19 +898,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -858,69 +930,69 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--on-dark-text-primary); - ${tokens.textFieldChipColorHover}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${onDarkTextPrimary}; + ${tokens.textFieldChipColorHover}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -933,12 +1005,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -957,12 +1029,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -982,12 +1054,12 @@ export const config = { true: css` ${tokens.disclosureIconOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-homeds/src/components/Skeleton/LineSkeleton.config.ts index 75db43f61ea..31ca5d7dbbc 100644 --- a/packages/plasma-homeds/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/plasma-homeds/src/components/Skeleton/LineSkeleton.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + dsplL, + dsplM, + dsplS, + h1, + h2, + h3, + h4, + h5, + surfaceSkeletonDeepGradient, + surfaceSkeletonGradient, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textL, + textM, + textS, + textXS, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, skeletonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,84 +31,84 @@ export const config = { variations: { view: { default: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient, var(--surface-skeleton-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, lighter: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient-lighter, var(--surface-skeleton-deep-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonDeepGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, }, size: { bodyL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size); + ${skeletonTokens.lineHeight}: ${bodyL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyL.fontSize}; `, bodyM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size); + ${skeletonTokens.lineHeight}: ${bodyM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyM.fontSize}; `, bodyS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size); + ${skeletonTokens.lineHeight}: ${bodyS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyS.fontSize}; `, bodyXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXS.fontSize}; `, bodyXXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXXS.fontSize}; `, dsplL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size); + ${skeletonTokens.lineHeight}: ${dsplL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplL.fontSize}; `, dsplM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size); + ${skeletonTokens.lineHeight}: ${dsplM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplM.fontSize}; `, dsplS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size); + ${skeletonTokens.lineHeight}: ${dsplS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplS.fontSize}; `, h1: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size); + ${skeletonTokens.lineHeight}: ${h1.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h1.fontSize}; `, h2: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size); + ${skeletonTokens.lineHeight}: ${h2.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h2.fontSize}; `, h3: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size); + ${skeletonTokens.lineHeight}: ${h3.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h3.fontSize}; `, h4: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size); + ${skeletonTokens.lineHeight}: ${h4.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h4.fontSize}; `, h5: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); + ${skeletonTokens.lineHeight}: ${h5.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h5.fontSize}; `, textL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); + ${skeletonTokens.lineHeight}: ${textL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textL.fontSize}; `, textM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size); + ${skeletonTokens.lineHeight}: ${textM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textM.fontSize}; `, textS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size); + ${skeletonTokens.lineHeight}: ${textS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textS.fontSize}; `, textXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size); + ${skeletonTokens.lineHeight}: ${textXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textXS.fontSize}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Slider/Slider.config.ts b/packages/plasma-homeds/src/components/Slider/Slider.config.ts index c171f134490..4ffc252c5ac 100644 --- a/packages/plasma-homeds/src/components/Slider/Slider.config.ts +++ b/packages/plasma-homeds/src/components/Slider/Slider.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + surfaceAccent, + surfaceAccentGradient, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +25,70 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, gradient: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent-gradient); + ${sliderTokens.fillColor}: ${surfaceAccentGradient}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, }, size: { @@ -85,24 +102,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -119,12 +136,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -136,24 +153,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -170,12 +187,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -187,24 +204,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -221,12 +238,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-homeds/src/components/Spinner/Spinner.config.ts b/packages/plasma-homeds/src/components/Spinner/Spinner.config.ts index 4d9f2104def..b8175b343f5 100644 --- a/packages/plasma-homeds/src/components/Spinner/Spinner.config.ts +++ b/packages/plasma-homeds/src/components/Spinner/Spinner.config.ts @@ -1,3 +1,13 @@ +import { + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +18,28 @@ export const config = { variations: { view: { default: css` - --plasma-spinner-color: var(--text-primary); + --plasma-spinner-color: ${textPrimary}; `, secondary: css` - --plasma-spinner-color: var(--text-secondary); + --plasma-spinner-color: ${textSecondary}; `, tertiary: css` - --plasma-spinner-color: var(--text-tertiary); + --plasma-spinner-color: ${textTertiary}; `, paragraph: css` - --plasma-spinner-color: var(--text-paragraph); + --plasma-spinner-color: ${textParagraph}; `, accent: css` - --plasma-spinner-color: var(--text-accent); + --plasma-spinner-color: ${textAccent}; `, positive: css` - --plasma-spinner-color: var(--text-positive); + --plasma-spinner-color: ${textPositive}; `, warning: css` - --plasma-spinner-color: var(--text-warning); + --plasma-spinner-color: ${textWarning}; `, negative: css` - --plasma-spinner-color: var(--text-negative); + --plasma-spinner-color: ${textNegative}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Steps/Steps.config.ts b/packages/plasma-homeds/src/components/Steps/Steps.config.ts index ee1ee5e1e98..86b6349e997 100644 --- a/packages/plasma-homeds/src/components/Steps/Steps.config.ts +++ b/packages/plasma-homeds/src/components/Steps/Steps.config.ts @@ -1,42 +1,72 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -47,10 +77,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -60,26 +90,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -100,33 +130,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.5rem; ${tokens.largeBulletIndentHeight}: 1.25rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyL.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyM.fontFamily}; + ${tokens.contentFontSize}: ${bodyM.fontSize}; + ${tokens.contentFontStyle}: ${bodyM.fontStyle}; + ${tokens.contentFontWeight}: ${bodyM.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyM.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -147,33 +177,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -194,33 +224,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -241,33 +271,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 0.75rem; ${tokens.largeBulletIndentHeight}: 0.5rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -278,8 +308,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/plasma-homeds/src/components/Switch/Switch.config.ts b/packages/plasma-homeds/src/components/Switch/Switch.config.ts index 8a08bd686d8..b9b70dc186b 100644 --- a/packages/plasma-homeds/src/components/Switch/Switch.config.ts +++ b/packages/plasma-homeds/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,50 +24,50 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -83,17 +96,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -104,7 +117,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Table/Table.config.ts b/packages/plasma-homeds/src/components/Table/Table.config.ts index 770fa22b6d8..50bf3068fb2 100644 --- a/packages/plasma-homeds/src/components/Table/Table.config.ts +++ b/packages/plasma-homeds/src/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + surfaceTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +28,12 @@ export const config = { }, size: { l: css` - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.headerRowHeight}: 3.125rem; ${tokens.rowHeight}: 3.125rem; @@ -31,9 +43,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.5rem; ${tokens.editableCellIconButtonWidth}: 3rem; @@ -42,18 +54,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.875rem; ${tokens.editableCellInputPadding}: 0 0.75rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.75rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.875rem; @@ -63,12 +75,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -76,20 +88,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.5rem 0.875rem; ${tokens.selectControlPanelGap}: 0.5rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight}; `, m: css` - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.headerRowHeight}: 2.75rem; ${tokens.rowHeight}: 2.75rem; @@ -99,9 +111,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.375rem; ${tokens.editableCellIconButtonWidth}: 2.5rem; @@ -110,18 +122,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.625rem; ${tokens.editableCellInputPadding}: 0 0.625rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.75rem; @@ -131,12 +143,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -144,20 +156,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.75rem; ${tokens.selectControlPanelGap}: 0.625rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, s: css` - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.headerRowHeight}: 2.125rem; ${tokens.rowHeight}: 2.125rem; @@ -167,9 +179,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.25rem; ${tokens.editableCellIconButtonWidth}: 2rem; @@ -178,18 +190,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.5rem; ${tokens.editableCellInputPadding}: 0 0.375rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.25rem 0.5rem; ${tokens.buttonHeight}: 1.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.625rem; @@ -199,12 +211,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.25rem 0 0; ${tokens.selectItemIconSize}: 1rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 0.875rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -212,12 +224,12 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.5rem; ${tokens.selectControlPanelGap}: 0.25rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/plasma-homeds/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index e24163ceaeb..1767ded4d25 100644 --- a/packages/plasma-homeds/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/plasma-homeds/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,13 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,78 +18,78 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; diff --git a/packages/plasma-homeds/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-homeds/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 0b1a791588a..513fbd4b7d6 100644 --- a/packages/plasma-homeds/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-homeds/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,28 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h1, + h2, + h3, + h4, + h5, + inverseTextPrimary, + inverseTextSecondary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,106 +33,106 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -123,12 +148,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -142,12 +167,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -161,12 +186,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -180,12 +205,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -197,12 +222,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -214,12 +239,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -231,12 +256,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -248,12 +273,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -265,12 +290,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/plasma-homeds/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/plasma-homeds/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be96906109..8035a82a232 100644 --- a/packages/plasma-homeds/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/plasma-homeds/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +16,36 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/plasma-homeds/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/plasma-homeds/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index c1b4b62e4a1..63d8739df0a 100644 --- a/packages/plasma-homeds/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/plasma-homeds/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/plasma-homeds/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/plasma-homeds/src/components/Tabs/vertical/VerticalTabItem.config.ts index c819eeeacbd..740c364f094 100644 --- a/packages/plasma-homeds/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/plasma-homeds/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +24,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +65,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -69,12 +85,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -89,12 +105,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -109,12 +125,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/plasma-homeds/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/plasma-homeds/src/components/Tabs/vertical/VerticalTabs.config.ts index 78eba3f047c..ea53a0f8194 100644 --- a/packages/plasma-homeds/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/plasma-homeds/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/plasma-homeds/src/components/TextArea/TextArea.clear.config.ts b/packages/plasma-homeds/src/components/TextArea/TextArea.clear.config.ts index 87abb38a0d7..7f60fc7d971 100644 --- a/packages/plasma-homeds/src/components/TextArea/TextArea.clear.config.ts +++ b/packages/plasma-homeds/src/components/TextArea/TextArea.clear.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -19,31 +42,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` ${tokens.inputBackgroundColor}: transparent; @@ -56,31 +79,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-positive); - ${tokens.inputColorFocus}: var(--text-positive); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPositive}; + ${tokens.inputColorFocus}: ${textPositive}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` ${tokens.inputBackgroundColor}: transparent; @@ -93,31 +116,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-warning); - ${tokens.inputColorFocus}: var(--text-warning); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textWarning}; + ${tokens.inputColorFocus}: ${textWarning}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` ${tokens.inputBackgroundColor}: transparent; @@ -130,31 +153,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-negative); - ${tokens.inputColorFocus}: var(--text-negative); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textNegative}; + ${tokens.inputColorFocus}: ${textNegative}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -184,30 +207,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -225,12 +248,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -258,30 +281,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -299,12 +322,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -332,30 +355,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -373,12 +396,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -406,30 +429,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -447,12 +470,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -480,30 +503,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -521,24 +544,24 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; ${tokens.tooltipBoxShadow}: var( --shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08) ); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -551,12 +574,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -575,12 +598,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -598,9 +621,9 @@ export const config = { }, readOnly: { true: css` - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/plasma-homeds/src/components/TextArea/TextArea.config.ts b/packages/plasma-homeds/src/components/TextArea/TextArea.config.ts index 9a056369045..5c19900c650 100644 --- a/packages/plasma-homeds/src/components/TextArea/TextArea.config.ts +++ b/packages/plasma-homeds/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,41 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,172 +46,172 @@ export const config = { variations: { view: { default: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-primary); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-primary); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-positive); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-positive); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-positive); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textPositive}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-warning); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-warning); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-warning); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textWarning}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-negative); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-negative); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -202,30 +240,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -243,12 +281,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.751rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -275,30 +313,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -316,12 +354,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -348,30 +386,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -391,12 +429,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -423,30 +461,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.5rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +502,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -496,30 +534,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.375rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -537,20 +575,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -563,12 +601,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -587,12 +625,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -606,18 +644,18 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-homeds/src/components/TextField/TextField.config.ts b/packages/plasma-homeds/src/components/TextField/TextField.config.ts index c0ecb9b29a7..33102974846 100644 --- a/packages/plasma-homeds/src/components/TextField/TextField.config.ts +++ b/packages/plasma-homeds/src/components/TextField/TextField.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,54 +53,54 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active); + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentNegativeActive}; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -73,32 +117,32 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -111,12 +155,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -139,32 +183,32 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -177,12 +221,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -205,32 +249,32 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.25rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.125rem 0 0.25rem 0; @@ -243,12 +287,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -263,125 +307,125 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -394,12 +438,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -418,12 +462,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -442,12 +486,12 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/plasma-homeds/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/plasma-homeds/src/components/TextFieldGroup/TextFieldGroup.config.ts index 200d2e26ac4..a30318ea2c9 100644 --- a/packages/plasma-homeds/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/plasma-homeds/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.textFieldDefaultRadius}: 0.75rem; @@ -77,28 +78,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -111,12 +112,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -133,28 +134,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -167,12 +168,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.textFieldSegmentedRadius}: 0.125rem; @@ -189,28 +190,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -223,12 +224,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/plasma-homeds/src/components/TimePicker/TimePicker.config.ts b/packages/plasma-homeds/src/components/TimePicker/TimePicker.config.ts index b86cc9da0bd..a1961bee904 100644 --- a/packages/plasma-homeds/src/components/TimePicker/TimePicker.config.ts +++ b/packages/plasma-homeds/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,45 +33,45 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; - ${tokens.labelColor}: var(--text-primary); + ${tokens.labelColor}: ${textPrimary}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); + ${tokens.timePickerShadow}: ${shadowDownSoftS}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -63,12 +86,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -80,12 +103,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -103,34 +126,34 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.5rem; @@ -146,12 +169,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -163,12 +186,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -186,34 +209,34 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -229,12 +252,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -246,12 +269,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -269,34 +292,34 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.813rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -312,12 +335,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -329,12 +352,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -352,34 +375,34 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -450,13 +473,13 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Toast/Toast.config.ts b/packages/plasma-homeds/src/components/Toast/Toast.config.ts index 9678f1dd594..76fb54e8912 100644 --- a/packages/plasma-homeds/src/components/Toast/Toast.config.ts +++ b/packages/plasma-homeds/src/components/Toast/Toast.config.ts @@ -1,3 +1,17 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,49 +23,49 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-positive); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textPositive}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-negative); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textNegative}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary); + ${toastTokens.closeIconColor}: ${onDarkTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary); + ${toastTokens.closeIconColor}: ${onLightTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextSecondary}; `, }, size: { @@ -59,12 +73,12 @@ export const config = { ${toastTokens.borderRadius}: 0.75rem; ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/plasma-homeds/src/components/Toolbar/Toolbar.config.ts b/packages/plasma-homeds/src/components/Toolbar/Toolbar.config.ts index 89581b0d6bf..e86bbb05e2c 100644 --- a/packages/plasma-homeds/src/components/Toolbar/Toolbar.config.ts +++ b/packages/plasma-homeds/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/plasma-homeds/src/components/Tooltip/Tooltip.config.ts b/packages/plasma-homeds/src/components/Tooltip/Tooltip.config.ts index 2ca59cef4c5..529b66fb569 100644 --- a/packages/plasma-homeds/src/components/Tooltip/Tooltip.config.ts +++ b/packages/plasma-homeds/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,4 @@ +import { bodyS, bodyXS, surfaceSolidCardBrightness, textPrimary } from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +17,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -30,7 +31,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -41,12 +42,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -55,15 +56,15 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.color}: ${textPrimary}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Tree/Tree.config.ts b/packages/plasma-homeds/src/components/Tree/Tree.config.ts index e8cbfce73a6..1011053470a 100644 --- a/packages/plasma-homeds/src/components/Tree/Tree.config.ts +++ b/packages/plasma-homeds/src/components/Tree/Tree.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,24 +24,24 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -53,12 +69,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.itemHeight}: 3.5rem; @@ -84,12 +100,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.itemHeight}: 3rem; @@ -115,12 +131,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -146,12 +162,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.itemHeight}: 2rem; @@ -177,12 +193,12 @@ export const config = { ${tokens.checkboxInnerSize}: 0.875rem; ${tokens.checkboxBorderRadius}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Typography/Body.config.ts b/packages/plasma-homeds/src/components/Typography/Body.config.ts index 23927fdf18c..9ec94354037 100644 --- a/packages/plasma-homeds/src/components/Typography/Body.config.ts +++ b/packages/plasma-homeds/src/components/Typography/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Typography/Dspl.config.ts b/packages/plasma-homeds/src/components/Typography/Dspl.config.ts index 3fb1245a027..7579470494b 100644 --- a/packages/plasma-homeds/src/components/Typography/Dspl.config.ts +++ b/packages/plasma-homeds/src/components/Typography/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +18,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +38,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +58,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Typography/Heading.config.ts b/packages/plasma-homeds/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..dc67855004b 100644 --- a/packages/plasma-homeds/src/components/Typography/Heading.config.ts +++ b/packages/plasma-homeds/src/components/Typography/Heading.config.ts @@ -1,3 +1,20 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configH1 = { @@ -7,14 +24,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +43,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +62,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +81,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +100,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, diff --git a/packages/plasma-homeds/src/components/Typography/Text.config.ts b/packages/plasma-homeds/src/components/Typography/Text.config.ts index 542bc09a87d..42d1c004635 100644 --- a/packages/plasma-homeds/src/components/Typography/Text.config.ts +++ b/packages/plasma-homeds/src/components/Typography/Text.config.ts @@ -1,3 +1,17 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_homeds'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +21,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +41,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +61,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +81,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, From 7bf57c50c64ac2d8d2374e14379f016df723aca7 Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 20:27:21 +0300 Subject: [PATCH 08/24] chore(plasma-new-hope): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 285 ++--- .../components/Attach/Attach.config.ts | 947 ++++++++------- .../Autocomplete/Autocomplete.config.ts | 553 ++++----- .../components/Avatar/Avatar.config.ts | 229 ++-- .../examples/components/Badge/Badge.config.ts | 148 ++- .../Breadcrumbs/Breadcrumbs.config.ts | 68 +- .../components/Button/Button.config.ts | 258 ++-- .../ButtonGroup/ButtonGroup.config.ts | 300 +++-- .../components/Calendar/Calendar.config.ts | 460 ++++---- .../Calendar/CalendarDouble.config.ts | 460 ++++---- .../examples/components/Card/Card.config.ts | 3 +- .../components/Carousel/Carousel.config.ts | 24 +- .../examples/components/Cell/Cell.config.ts | 169 +-- .../components/Checkbox/Checkbox.config.ts | 158 +-- .../Checkbox/Checkbox.outline.config.ts | 170 +-- .../examples/components/Chip/Chip.config.ts | 240 ++-- .../Chip/Chip.transparent.config.ts | 212 ++-- .../components/ChipGroup/ChipGroup.config.ts | 102 +- .../components/CodeField/CodeField.config.ts | 85 +- .../components/Combobox/Combobox.config.ts | 753 ++++++------ .../Combobox/Legacy/Combobox.config.ts | 270 +++-- .../components/Counter/Counter.config.ts | 103 +- .../DatePicker/DatePicker.clear.config.ts | 1035 +++++++++-------- .../DatePicker/DatePicker.config.ts | 1022 ++++++++-------- .../DateTimePicker/DateTimePicker.config.ts | 938 ++++++++------- .../components/Divider/Divider.config.ts | 14 +- .../components/Drawer/Drawer.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 132 ++- .../components/Editable/Editable.config.ts | 17 +- .../EmbedIconButton/EmbedIconButton.config.ts | 116 +- .../EmptyState/EmptyState.config.ts | 49 +- .../examples/components/File/File.config.ts | 158 +-- .../IconButton/IconButton.config.ts | 184 +-- .../components/Indicator/Indicator.config.ts | 26 +- .../InformationWrapper.config.ts | 295 ++--- .../examples/components/Link/Link.config.ts | 143 ++- .../LinkButton/LinkButton.config.ts | 210 ++-- .../examples/components/List/List.config.ts | 77 +- .../components/Loader/Loader.config.ts | 181 +-- .../examples/components/Modal/Modal.config.ts | 23 +- .../NavigationDrawer.config.ts | 64 +- .../examples/components/Note/Note.config.ts | 164 +-- .../Notification/Notification.config.ts | 196 ++-- .../NumberInput/NumberInput.config.ts | 289 +++-- .../Pagination/Pagination.config.ts | 220 ++-- .../examples/components/Panel/Panel.config.ts | 5 +- .../components/Popover/Popover.config.ts | 5 +- .../components/Progress/Progress.config.ts | 53 +- .../ProgressBarCircular.config.ts | 146 ++- .../components/Radiobox/Radiobox.config.ts | 154 +-- .../components/Range/Range.clear.config.ts | 484 ++++---- .../examples/components/Range/Range.config.ts | 467 ++++---- .../components/Rating/Rating.config.ts | 385 +++--- .../components/Segment/SegmentGroup.config.ts | 11 +- .../components/Segment/SegmentItem.config.ts | 168 +-- .../examples/components/Sheet/Sheet.config.ts | 14 +- .../Skeleton/LineSkeleton.config.ts | 108 +- .../components/Slider/Slider.config.ts | 209 ++-- .../components/Spinner/Spinner.config.ts | 26 +- .../examples/components/Steps/Steps.config.ts | 332 +++--- .../components/Switch/Switch.config.ts | 103 +- .../examples/components/Table/Table.config.ts | 180 +-- .../HorizontalIconTabItem.config.ts | 70 +- .../horizontal/HorizontalTabItem.config.ts | 258 ++-- .../Tabs/horizontal/HorizontalTabs.config.ts | 36 +- .../vertical/VerticalIconTabItem.config.ts | 23 +- .../Tabs/vertical/VerticalTabItem.config.ts | 90 +- .../Tabs/vertical/VerticalTabs.config.ts | 17 +- .../TextArea/TextArea.clear.config.ts | 443 +++---- .../components/TextArea/TextArea.config.ts | 634 +++++----- .../TextField/TextField.clear.config.ts | 789 +++++++------ .../components/TextField/TextField.config.ts | 811 +++++++------ .../TextFieldGroup/TextFieldGroup.config.ts | 193 +-- .../TextFieldSlider.clear.config.ts | 606 +++++----- .../TextFieldSlider/TextFieldSlider.config.ts | 658 ++++++----- .../TimePicker/TimePicker.config.ts | 331 +++--- .../TimePickerGrid/TimePickerGrid.config.ts | 68 +- .../examples/components/Toast/Toast.config.ts | 70 +- .../components/ToastNew/Toast.config.ts | 26 +- .../components/Toolbar/Toolbar.config.ts | 11 +- .../components/Tooltip/Tooltip.config.ts | 41 +- .../examples/components/Tree/Tree.config.ts | 110 +- .../components/_ai/Answer/Answer.config.ts | 360 +++--- .../_ai/Container/Container.config.ts | 84 +- .../components/_ai/Header/Header.config.ts | 274 +++-- .../components/_ai/Input/Input.config.ts | 235 ++-- .../_ai/UserMessage/UserMessage.config.ts | 354 +++--- .../Popover/Popover.closeInner.config.ts | 31 +- .../_beta/Popover/Popover.closeNone.config.ts | 9 +- .../_beta/Tooltip/Tooltip.config.ts | 45 +- .../typography/components/Body/Body.config.ts | 97 +- .../typography/components/Dspl/Dspl.config.ts | 59 +- .../components/Heading/Heading.config.ts | 116 +- .../typography/components/Text/Text.config.ts | 78 +- 94 files changed, 11631 insertions(+), 9810 deletions(-) diff --git a/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.config.ts b/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.config.ts index 604830ad738..85002aad8fe 100644 --- a/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Accordion/Accordion.config.ts @@ -1,3 +1,28 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { accordionTokens } from '../../../components/Accordion'; @@ -13,12 +38,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorder}: none; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); @@ -27,15 +52,15 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorder}: none; - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -46,19 +71,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.875rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyLBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -67,19 +92,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -88,19 +113,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -109,19 +134,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXSBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.lineHeight}; `, h2: css` ${accordionTokens.accordionItemPaddingVertical}: 1rem; @@ -130,19 +155,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h2Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -151,19 +176,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 0.688rem; @@ -171,19 +196,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h5: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -191,19 +216,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h6: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -211,19 +236,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h6Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Attach/Attach.config.ts b/packages/plasma-new-hope/src/examples/components/Attach/Attach.config.ts index 4df0cbd2103..d45f17f0bff 100644 --- a/packages/plasma-new-hope/src/examples/components/Attach/Attach.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Attach/Attach.config.ts @@ -1,3 +1,54 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { attachTokens } from '../../../components/Attach'; @@ -12,482 +63,482 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.buttonColorActive}: var(--text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.buttonColorHover}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.buttonColorActive}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.iconButtonColorHover}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.iconButtonColorActive}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary-hover); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.buttonColorActive}: var(--text-primary-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColorHover}: ${textPrimaryHover}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.buttonColorActive}: ${textPrimaryActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary-hover); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonColorActive}: var(--text-primary-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonColorActive}: ${textPrimaryActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, positive: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-positive); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfacePositive}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, success: css` - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, warning: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-warning); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceWarning}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, critical: css` - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, negative: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-negative); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceNegative}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, dark: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, black: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, white: css` - ${attachTokens.buttonColor}: var(--on-light-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.buttonColor}: ${onLightTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -502,12 +553,12 @@ export const config = { ${attachTokens.buttonWidth}: 12.5rem; ${attachTokens.buttonPadding}: 1.5rem; ${attachTokens.buttonRadius}: 0.875rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyL.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -526,37 +577,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonHeight}: 3.5rem; ${attachTokens.iconButtonWidth}: 3.5rem; ${attachTokens.iconButtonPadding}: 1.5rem; ${attachTokens.iconButtonRadius}: 0.875rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -565,12 +616,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -592,12 +643,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -616,37 +667,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -655,12 +706,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -682,12 +733,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -706,37 +757,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -745,12 +796,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -772,12 +823,12 @@ export const config = { ${attachTokens.buttonWidth}: 10rem; ${attachTokens.buttonPadding}: 0.75rem; ${attachTokens.buttonRadius}: 0.5rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -796,37 +847,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.25rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2rem; ${attachTokens.iconButtonWidth}: 2rem; ${attachTokens.iconButtonPadding}: 0.75rem; ${attachTokens.iconButtonRadius}: 0.5rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -835,12 +886,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/plasma-new-hope/src/examples/components/Autocomplete/Autocomplete.config.ts b/packages/plasma-new-hope/src/examples/components/Autocomplete/Autocomplete.config.ts index 046195d33bf..ef41a9bb0af 100644 --- a/packages/plasma-new-hope/src/examples/components/Autocomplete/Autocomplete.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Autocomplete/Autocomplete.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { autocompleteTokens as tokens } from '../../../components/Autocomplete'; @@ -11,172 +42,172 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-positive); - ${tokens.textFieldDividerColorHover}: var(--surface-positive); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfacePositive}; + ${tokens.textFieldDividerColorHover}: ${surfacePositive}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-warning); - ${tokens.textFieldDividerColorHover}: var(--surface-warning); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceWarning}; + ${tokens.textFieldDividerColorHover}: ${surfaceWarning}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--surface-negative); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${surfaceNegative}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, }, size: { @@ -195,21 +226,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -217,12 +248,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -242,12 +273,12 @@ export const config = { ${tokens.itemPadding}: 1.0625rem 1rem; ${tokens.itemBorderRadius}: 0.75rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; ${tokens.emptyStateGap}: 0.5rem; @@ -270,21 +301,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -292,12 +323,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -317,12 +348,12 @@ export const config = { ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; ${tokens.emptyStateGap}: 0.375rem; @@ -345,21 +376,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -367,12 +398,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -392,12 +423,12 @@ export const config = { ${tokens.itemPadding}: 0.6875rem 0.75rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -420,21 +451,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -442,12 +473,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -467,12 +498,12 @@ export const config = { ${tokens.itemPadding}: 0.5625rem 0.5rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; ${tokens.emptyStateGap}: 0.25rem; @@ -483,22 +514,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -511,12 +542,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -535,12 +566,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -558,14 +589,14 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Avatar/Avatar.config.ts b/packages/plasma-new-hope/src/examples/components/Avatar/Avatar.config.ts index 40f7b899889..5027f9821b7 100644 --- a/packages/plasma-new-hope/src/examples/components/Avatar/Avatar.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Avatar/Avatar.config.ts @@ -1,3 +1,32 @@ +import { + bodyS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textAccentGradient, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tokens } from '../../../components/Avatar/Avatar.tokens'; @@ -11,11 +40,11 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-accent-gradient); + ${tokens.color}: ${textAccentGradient}; // TODO: #1005 заменить на токен ${tokens.backgroundColor}: linear-gradient(94deg, rgba(62, 121, 240, 0.2) 6.49%, rgba(39, 198, 229, 0.2) 93.51%); - ${tokens.statusOnlineColor}: var(--surface-positive); - ${tokens.statusOfflineColor}: var(--surface-solid-tertiary); + ${tokens.statusOnlineColor}: ${surfacePositive}; + ${tokens.statusOfflineColor}: ${surfaceSolidTertiary}; ${tokens.scaleHover}: 1.02; `, }, @@ -33,12 +62,12 @@ export const config = { ${tokens.badgePadding}: 0 0.6875rem; ${tokens.badgePaddingIconOnly}: 0 0.375rem; - ${tokens.badgeFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.badgeFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.badgeFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.badgeFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.badgeLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.badgeLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.badgeFontFamily}: ${bodyS.fontFamily}; + ${tokens.badgeFontSize}: ${bodyS.fontSize}; + ${tokens.badgeFontStyle}: ${bodyS.fontStyle}; + ${tokens.badgeFontWeight}: ${bodyS.fontWeight}; + ${tokens.badgeLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.badgeLineHeight}: ${bodyS.lineHeight}; ${tokens.badgeLeftContentMarginLeft}: -0.0625rem; ${tokens.badgeLeftContentMarginRight}: 0.25rem; @@ -50,12 +79,12 @@ export const config = { ${tokens.counterBorderRadius}: 1rem; ${tokens.counterHeight}: 1.75rem; ${tokens.counterPadding}: 0 0.625rem; - ${tokens.counterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.counterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.counterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.counterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.counterLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.counterLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.counterFontFamily}: ${bodyS.fontFamily}; + ${tokens.counterFontSize}: ${bodyS.fontSize}; + ${tokens.counterFontStyle}: ${bodyS.fontStyle}; + ${tokens.counterFontWeight}: ${bodyS.fontWeight}; + ${tokens.counterLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.counterLineHeight}: ${bodyS.lineHeight}; `, l: css` ${tokens.avatarSize}: 3rem; @@ -72,12 +101,12 @@ export const config = { ${tokens.badgePadding}: 0 0.4375rem; ${tokens.badgePaddingIconOnly}: 0 0.25rem; - ${tokens.badgeFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.badgeFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.badgeFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.badgeFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.badgeLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.badgeLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.badgeFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.badgeFontSize}: ${bodyXXS.fontSize}; + ${tokens.badgeFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.badgeFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.badgeLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.badgeLineHeight}: ${bodyXXS.lineHeight}; ${tokens.badgeLeftContentMarginLeft}: -0.0625rem; ${tokens.badgeLeftContentMarginRight}: 0.125rem; @@ -89,12 +118,12 @@ export const config = { ${tokens.counterBorderRadius}: 1rem; ${tokens.counterHeight}: 1.25rem; ${tokens.counterPadding}: 0 0.375rem; - ${tokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.counterFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.counterFontSize}: ${bodyXXS.fontSize}; + ${tokens.counterFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.counterFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.counterLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.counterLineHeight}: ${bodyXXS.lineHeight}; `, m: css` ${tokens.avatarSize}: 2.25rem; @@ -111,12 +140,12 @@ export const config = { ${tokens.badgePadding}: 0 0.25rem; ${tokens.badgePaddingIconOnly}: 0 0.188rem; - ${tokens.badgeFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.badgeFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.badgeFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.badgeFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.badgeLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.badgeLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.badgeFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.badgeFontSize}: ${bodyXXS.fontSize}; + ${tokens.badgeFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.badgeFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.badgeLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.badgeLineHeight}: ${bodyXXS.lineHeight}; ${tokens.badgeLeftContentMarginLeft}: -0.0625rem; ${tokens.badgeLeftContentMarginRight}: 0.125rem; @@ -128,12 +157,12 @@ export const config = { ${tokens.counterBorderRadius}: 1rem; ${tokens.counterHeight}: 1rem; ${tokens.counterPadding}: 0 0.25rem; - ${tokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.counterFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.counterFontSize}: ${bodyXXS.fontSize}; + ${tokens.counterFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.counterFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.counterLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.counterLineHeight}: ${bodyXXS.lineHeight}; `, s: css` ${tokens.avatarSize}: 1.5rem; @@ -148,12 +177,12 @@ export const config = { ${tokens.counterBorderRadius}: 1rem; ${tokens.counterHeight}: 0.75rem; ${tokens.counterPadding}: 0 0.125rem; - ${tokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.counterFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.counterFontSize}: ${bodyXXS.fontSize}; + ${tokens.counterFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.counterFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.counterLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.counterLineHeight}: ${bodyXXS.lineHeight}; `, fit: css` ${tokens.avatarSize}: 100%; @@ -168,7 +197,7 @@ export const config = { true: css` ${tokens.outlineSize}: 0.1rem; ${tokens.outlineOffset}: -0.2rem; - ${tokens.outlineColor}: var(--surface-accent); + ${tokens.outlineColor}: ${surfaceAccent}; `, }, shape: { @@ -184,104 +213,104 @@ export const config = { }, badgeView: { default: css` - ${tokens.badgeColor}: var(--inverse-text-primary); - ${tokens.badgeBackground}: var(--surface-solid-default); + ${tokens.badgeColor}: ${inverseTextPrimary}; + ${tokens.badgeBackground}: ${surfaceSolidDefault}; - ${tokens.badgeColorTransparent}: var(--text-primary); - ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-secondary); + ${tokens.badgeColorTransparent}: ${textPrimary}; + ${tokens.badgeBackgroundTransparent}: ${surfaceTransparentSecondary}; - ${tokens.badgeColorClear}: var(--text-primary); - ${tokens.badgeBackgroundClear}: var(--surface-clear); + ${tokens.badgeColorClear}: ${textPrimary}; + ${tokens.badgeBackgroundClear}: ${surfaceClear}; `, accent: css` - ${tokens.badgeColor}: var(--on-dark-text-primary); - ${tokens.badgeBackground}: var(--surface-accent); + ${tokens.badgeColor}: ${onDarkTextPrimary}; + ${tokens.badgeBackground}: ${surfaceAccent}; - ${tokens.badgeColorTransparent}: var(--text-accent); - ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-accent); + ${tokens.badgeColorTransparent}: ${textAccent}; + ${tokens.badgeBackgroundTransparent}: ${surfaceTransparentAccent}; - ${tokens.badgeColorClear}: var(--text-accent); - ${tokens.badgeBackgroundClear}: var(--surface-clear) + ${tokens.badgeColorClear}: ${textAccent}; + ${tokens.badgeBackgroundClear}: ${surfaceClear} `, positive: css` - ${tokens.badgeColor}: var(--on-dark-text-primary); - ${tokens.badgeBackground}: var(--surface-positive); + ${tokens.badgeColor}: ${onDarkTextPrimary}; + ${tokens.badgeBackground}: ${surfacePositive}; - ${tokens.badgeColorTransparent}: var(--text-positive); - ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-positive); + ${tokens.badgeColorTransparent}: ${textPositive}; + ${tokens.badgeBackgroundTransparent}: ${surfaceTransparentPositive}; - ${tokens.badgeColorClear}: var(--text-positive); - ${tokens.badgeBackgroundClear}: var(--surface-clear) + ${tokens.badgeColorClear}: ${textPositive}; + ${tokens.badgeBackgroundClear}: ${surfaceClear} `, warning: css` - ${tokens.badgeColor}: var(--on-dark-text-primary); - ${tokens.badgeBackground}: var(--surface-warning); + ${tokens.badgeColor}: ${onDarkTextPrimary}; + ${tokens.badgeBackground}: ${surfaceWarning}; - ${tokens.badgeColorTransparent}: var(--text-warning); - ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-warning); + ${tokens.badgeColorTransparent}: ${textWarning}; + ${tokens.badgeBackgroundTransparent}: ${surfaceTransparentWarning}; - ${tokens.badgeColorClear}: var(--text-warning); - ${tokens.badgeBackgroundClear}: var(--surface-clear) + ${tokens.badgeColorClear}: ${textWarning}; + ${tokens.badgeBackgroundClear}: ${surfaceClear} `, negative: css` - ${tokens.badgeColor}: var(--on-dark-text-primary); - ${tokens.badgeBackground}: var(--surface-negative); + ${tokens.badgeColor}: ${onDarkTextPrimary}; + ${tokens.badgeBackground}: ${surfaceNegative}; - ${tokens.badgeColorTransparent}: var(--text-negative); - ${tokens.badgeBackgroundTransparent}: var(--surface-transparent-negative); + ${tokens.badgeColorTransparent}: ${textNegative}; + ${tokens.badgeBackgroundTransparent}: ${surfaceTransparentNegative}; - ${tokens.badgeColorClear}: var(--text-negative); - ${tokens.badgeBackgroundClear}: var(--surface-clear) + ${tokens.badgeColorClear}: ${textNegative}; + ${tokens.badgeBackgroundClear}: ${surfaceClear} `, dark: css` - ${tokens.badgeColor}: var(--on-dark-text-primary); - ${tokens.badgeBackground}: var(--on-light-surface-solid-default); + ${tokens.badgeColor}: ${onDarkTextPrimary}; + ${tokens.badgeBackground}: ${onLightSurfaceSolidDefault}; - ${tokens.badgeColorTransparent}: var(--on-dark-text-primary); - ${tokens.badgeBackgroundTransparent}: var(--on-light-surface-transparent-deep); + ${tokens.badgeColorTransparent}: ${onDarkTextPrimary}; + ${tokens.badgeBackgroundTransparent}: ${onLightSurfaceTransparentDeep}; ${tokens.badgeColorClear}: var(--on-light-text-pri - ${tokens.badgeBackgroundClear}: var(--surface-clear)mary); + ${tokens.badgeBackgroundClear}: ${surfaceClear}mary); `, light: css` - ${tokens.badgeColor}: var(--on-light-text-primary); - ${tokens.badgeBackground}: var(--on-dark-surface-solid-default); + ${tokens.badgeColor}: ${onLightTextPrimary}; + ${tokens.badgeBackground}: ${onDarkSurfaceSolidDefault}; - ${tokens.badgeColorTransparent}: var(--on-dark-text-primary); - ${tokens.badgeBackgroundTransparent}: var(--on-dark-surface-transparent-card); + ${tokens.badgeColorTransparent}: ${onDarkTextPrimary}; + ${tokens.badgeBackgroundTransparent}: ${onDarkSurfaceTransparentCard}; ${tokens.badgeColorClear}: var(--on-dark-text-prima - ${tokens.badgeBackgroundClear}: var(--surface-clear)ry); + ${tokens.badgeBackgroundClear}: ${surfaceClear}ry); `, }, counterView: { default: css` - ${tokens.counterColor}: var(--inverse-text-primary); - ${tokens.counterBackground}: var(--surface-solid-default); + ${tokens.counterColor}: ${inverseTextPrimary}; + ${tokens.counterBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.counterColor}: var(--on-dark-text-primary); - ${tokens.counterBackground}: var(--surface-accent); + ${tokens.counterColor}: ${onDarkTextPrimary}; + ${tokens.counterBackground}: ${surfaceAccent}; `, positive: css` - ${tokens.counterColor}: var(--on-dark-text-primary); - ${tokens.counterBackground}: var(--surface-positive); + ${tokens.counterColor}: ${onDarkTextPrimary}; + ${tokens.counterBackground}: ${surfacePositive}; `, warning: css` - ${tokens.counterColor}: var(--on-dark-text-primary); - ${tokens.counterBackground}: var(--surface-warning); + ${tokens.counterColor}: ${onDarkTextPrimary}; + ${tokens.counterBackground}: ${surfaceWarning}; `, negative: css` - ${tokens.counterColor}: var(--on-dark-text-primary); - ${tokens.counterBackground}: var(--surface-negative); + ${tokens.counterColor}: ${onDarkTextPrimary}; + ${tokens.counterBackground}: ${surfaceNegative}; `, dark: css` - ${tokens.counterColor}: var(--on-dark-text-primary); - ${tokens.counterBackground}: var(--on-light-surface-solid-default); + ${tokens.counterColor}: ${onDarkTextPrimary}; + ${tokens.counterBackground}: ${onLightSurfaceSolidDefault}; `, light: css` - ${tokens.counterColor}: var(--on-light-text-primary); - ${tokens.counterBackground}: var(--on-dark-surface-solid-default); + ${tokens.counterColor}: ${onLightTextPrimary}; + ${tokens.counterBackground}: ${onDarkSurfaceSolidDefault}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Badge/Badge.config.ts b/packages/plasma-new-hope/src/examples/components/Badge/Badge.config.ts index fd5c957cbce..c3c571ea343 100644 --- a/packages/plasma-new-hope/src/examples/components/Badge/Badge.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { badgeTokens } from '../../../components/Badge'; @@ -10,67 +38,67 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -80,12 +108,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -99,12 +127,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -118,12 +146,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -137,12 +165,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -161,7 +189,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, truncate: { diff --git a/packages/plasma-new-hope/src/examples/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/plasma-new-hope/src/examples/components/Breadcrumbs/Breadcrumbs.config.ts index ddc01631db2..e0790009e69 100644 --- a/packages/plasma-new-hope/src/examples/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { breadcrumbsTokens } from '../../../components/Breadcrumbs'; @@ -10,53 +22,53 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { l: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.5rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-l-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-l-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-l-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-l-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-l-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight}; `, m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${breadcrumbsTokens.breadcrumbsGap}: 0rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-xs-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-xs-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-xs-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-xs-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-xs-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Button/Button.config.ts b/packages/plasma-new-hope/src/examples/components/Button/Button.config.ts index 297f6467e5c..12b55913242 100644 --- a/packages/plasma-new-hope/src/examples/components/Button/Button.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Button/Button.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { buttonTokens } from '../../../components/Button'; @@ -11,104 +55,104 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, positive: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, negative: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -117,12 +161,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.75rem; ${buttonTokens.buttonRadius}: 1rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.5rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -138,12 +182,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 0.875rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -159,12 +203,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -180,12 +224,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -201,12 +245,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -222,12 +266,12 @@ export const config = { ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: 0.375rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 0.75rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -246,7 +290,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/plasma-new-hope/src/examples/components/ButtonGroup/ButtonGroup.config.ts b/packages/plasma-new-hope/src/examples/components/ButtonGroup/ButtonGroup.config.ts index c09bec75f62..8b14ba5b04b 100644 --- a/packages/plasma-new-hope/src/examples/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/plasma-new-hope/src/examples/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { buttonGroupTokens } from '../../../components/ButtonGroup'; @@ -10,124 +58,124 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, positive: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, negative: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; `, }, size: { @@ -138,12 +186,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 4rem; ${buttonGroupTokens.buttonPadding}: 1.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, l: css` ${buttonGroupTokens.buttonDefaultRadius}: 0.875rem; @@ -152,12 +200,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3.5rem; ${buttonGroupTokens.buttonPadding}: 1.5rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, m: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -167,12 +215,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -181,12 +229,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -195,12 +243,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -209,12 +257,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 1.5rem; ${buttonGroupTokens.buttonPadding}: 0.625rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/plasma-new-hope/src/examples/components/Calendar/Calendar.config.ts b/packages/plasma-new-hope/src/examples/components/Calendar/Calendar.config.ts index 097708364ab..6ebac157cd6 100644 --- a/packages/plasma-new-hope/src/examples/components/Calendar/Calendar.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Calendar/Calendar.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tokens as calendarBaseTokens } from '../../../components/Calendar/Calendar.tokens'; @@ -11,38 +37,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -53,46 +79,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -102,13 +128,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 4rem; ${calendarBaseTokens.iconButtonWidth}: 4rem; @@ -122,46 +148,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -171,13 +197,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3.5rem; ${calendarBaseTokens.iconButtonWidth}: 3.5rem; @@ -191,46 +217,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -240,13 +266,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -260,46 +286,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -309,13 +335,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -329,46 +355,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -378,13 +404,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; @@ -402,12 +428,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -416,7 +442,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -427,12 +453,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -441,7 +467,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Calendar/CalendarDouble.config.ts b/packages/plasma-new-hope/src/examples/components/Calendar/CalendarDouble.config.ts index a08908a6c9d..29c8814a282 100644 --- a/packages/plasma-new-hope/src/examples/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tokens as calendarDoubleTokens } from '../../../components/Calendar/Calendar.tokens'; @@ -11,39 +37,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -54,46 +80,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -103,13 +129,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 4rem; ${calendarDoubleTokens.iconButtonWidth}: 4rem; @@ -123,46 +149,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -172,13 +198,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; @@ -192,46 +218,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -241,13 +267,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -261,46 +287,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -310,13 +336,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -330,46 +356,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -379,13 +405,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; @@ -403,12 +429,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -417,7 +443,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -428,12 +454,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -442,7 +468,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Card/Card.config.ts b/packages/plasma-new-hope/src/examples/components/Card/Card.config.ts index cf16568e72a..530c0933c16 100644 --- a/packages/plasma-new-hope/src/examples/components/Card/Card.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { cardTokens as tokens } from '../../../components/Card'; @@ -10,7 +11,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/plasma-new-hope/src/examples/components/Carousel/Carousel.config.ts b/packages/plasma-new-hope/src/examples/components/Carousel/Carousel.config.ts index 0008358b065..441a9a50312 100644 --- a/packages/plasma-new-hope/src/examples/components/Carousel/Carousel.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { carouselNewTokens as tokens } from '../../../components/Carousel'; @@ -10,14 +18,14 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary); - ${tokens.paginationDotActiveBackground}: var(--surface-solid-default); - ${tokens.controlIconButtonColor}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.controlIconButtonColorHover}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.controlIconButtonColorActive}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary}; + ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault}; + ${tokens.controlIconButtonColor}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.controlIconButtonColorHover}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.controlIconButtonColorActive}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, }, size: { diff --git a/packages/plasma-new-hope/src/examples/components/Cell/Cell.config.ts b/packages/plasma-new-hope/src/examples/components/Cell/Cell.config.ts index c854eee744f..32ffc632365 100644 --- a/packages/plasma-new-hope/src/examples/components/Cell/Cell.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Cell/Cell.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { cellTokens } from '../../../components/Cell'; @@ -6,10 +7,10 @@ export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -25,26 +26,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -57,26 +58,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -89,26 +90,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -121,26 +122,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Checkbox/Checkbox.config.ts b/packages/plasma-new-hope/src/examples/components/Checkbox/Checkbox.config.ts index 39945cfba55..058bab6f64b 100644 --- a/packages/plasma-new-hope/src/examples/components/Checkbox/Checkbox.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { checkboxTokens } from '../../../components/Checkbox'; @@ -19,19 +35,19 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.125rem; ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -41,19 +57,19 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.125rem; ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${checkboxTokens.margin}: 0; @@ -63,19 +79,19 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.125rem; ${checkboxTokens.contentTopOffset}: 0.0625rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyL.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -83,74 +99,74 @@ export const config = { */ view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); - ${checkboxTokens.triggerBorderCheckedColor}: var(--text-accent); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; + ${checkboxTokens.triggerBorderCheckedColor}: ${textAccent}; `, // deprecated default: css` - ${checkboxTokens.fillColor}: var(--text-primary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPrimary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${checkboxTokens.fillColor}: var(--text-secondary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textSecondary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${checkboxTokens.fillColor}: var(--text-tertiary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textTertiary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${checkboxTokens.fillColor}: var(--text-paragraph); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textParagraph}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${checkboxTokens.fillColor}: var(--text-positive); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPositive}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${checkboxTokens.fillColor}: var(--text-warning); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textWarning}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, negative: css` - ${checkboxTokens.fillColor}: var(--text-negative); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textNegative}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-negative); + ${checkboxTokens.triggerBorderColor}: ${textNegative}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -161,7 +177,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Checkbox/Checkbox.outline.config.ts b/packages/plasma-new-hope/src/examples/components/Checkbox/Checkbox.outline.config.ts index 0adcdff1810..be1aa813414 100644 --- a/packages/plasma-new-hope/src/examples/components/Checkbox/Checkbox.outline.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Checkbox/Checkbox.outline.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + outlineAccent, + outlineNegative, + outlineTransparentTertiary, + textAccent, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { checkboxTokens } from '../../../components/Checkbox'; @@ -19,19 +35,19 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.0625rem; ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -41,19 +57,19 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.0625rem; ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${checkboxTokens.margin}: 0; @@ -63,19 +79,19 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.0625rem; ${checkboxTokens.contentTopOffset}: 0.0625rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyL.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -84,81 +100,81 @@ export const config = { view: { accent: css` ${checkboxTokens.fillColor}: transparent; - ${checkboxTokens.iconColor}: var(--outline-accent); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--outline-transparent-tertiary); + ${checkboxTokens.iconColor}: ${outlineAccent}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${outlineTransparentTertiary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); - ${checkboxTokens.triggerBorderCheckedColor}: var(--outline-accent); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; + ${checkboxTokens.triggerBorderCheckedColor}: ${outlineAccent}; `, // deprecated default: css` ${checkboxTokens.fillColor}: transparent; - ${checkboxTokens.iconColor}: var(--text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.iconColor}: ${textPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); - ${checkboxTokens.triggerBorderCheckedColor}: var(--text-primary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; + ${checkboxTokens.triggerBorderCheckedColor}: ${textPrimary}; `, // deprecated secondary: css` ${checkboxTokens.fillColor}: transparent; - ${checkboxTokens.iconColor}: var(--text-secondary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.iconColor}: ${textSecondary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); - ${checkboxTokens.triggerBorderCheckedColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; + ${checkboxTokens.triggerBorderCheckedColor}: ${textSecondary}; `, // deprecated tertiary: css` ${checkboxTokens.fillColor}: transparent; - ${checkboxTokens.iconColor}: var(--text-tertiary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.iconColor}: ${textTertiary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); - ${checkboxTokens.triggerBorderCheckedColor}: var(--text-tertiary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; + ${checkboxTokens.triggerBorderCheckedColor}: ${textTertiary}; `, // deprecated paragraph: css` ${checkboxTokens.fillColor}: transparent; - ${checkboxTokens.iconColor}: var(--text-paragraph); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.iconColor}: ${textParagraph}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); - ${checkboxTokens.triggerBorderCheckedColor}: var(--text-paragraph); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; + ${checkboxTokens.triggerBorderCheckedColor}: ${textParagraph}; `, // deprecated positive: css` ${checkboxTokens.fillColor}: transparent; - ${checkboxTokens.iconColor}: var(--text-positive); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.iconColor}: ${textPositive}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); - ${checkboxTokens.triggerBorderCheckedColor}: var(--text-positive); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; + ${checkboxTokens.triggerBorderCheckedColor}: ${textPositive}; `, // deprecated warning: css` ${checkboxTokens.fillColor}: transparent; - ${checkboxTokens.iconColor}: var(--text-warning); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.iconColor}: ${textWarning}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); - ${checkboxTokens.triggerBorderCheckedColor}: var(--text-warning); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; + ${checkboxTokens.triggerBorderCheckedColor}: ${textWarning}; `, negative: css` ${checkboxTokens.fillColor}: transparent; - ${checkboxTokens.iconColor}: var(--outline-negative); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.iconColor}: ${outlineNegative}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--outline-negative); - ${checkboxTokens.triggerBorderCheckedColor}: var(--outline-negative); + ${checkboxTokens.triggerBorderColor}: ${outlineNegative}; + ${checkboxTokens.triggerBorderCheckedColor}: ${outlineNegative}; `, }, disabled: { @@ -168,7 +184,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Chip/Chip.config.ts b/packages/plasma-new-hope/src/examples/components/Chip/Chip.config.ts index eb3878b0a02..618e3b78b4f 100644 --- a/packages/plasma-new-hope/src/examples/components/Chip/Chip.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Chip/Chip.config.ts @@ -1,3 +1,37 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { chipTokens } from '../../../components/Chip'; @@ -11,88 +45,88 @@ export const config = { variations: { view: { default: css` - ${chipTokens.color}: var(--inverse-text-primary); - ${chipTokens.background}: var(--surface-solid-default); - ${chipTokens.colorHover}: var(--inverse-text-primary); - ${chipTokens.backgroundHover}: var(--surface-solid-default-hover); - ${chipTokens.colorActive}: var(--inverse-text-primary); - ${chipTokens.backgroundActive}: var(--surface-solid-default-active); - ${chipTokens.backgroundReadOnly}: var(--surface-solid-default); - ${chipTokens.colorReadOnly}: var(--inverse-text-primary); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-solid-default); - ${chipTokens.colorReadOnlyHover}: var(--inverse-text-primary); - ${chipTokens.closeIconColor}: var(--inverse-text-secondary); - ${chipTokens.closeIconColorHover}: var(--inverse-text-secondary-hover); + ${chipTokens.color}: ${inverseTextPrimary}; + ${chipTokens.background}: ${surfaceSolidDefault}; + ${chipTokens.colorHover}: ${inverseTextPrimary}; + ${chipTokens.backgroundHover}: ${surfaceSolidDefaultHover}; + ${chipTokens.colorActive}: ${inverseTextPrimary}; + ${chipTokens.backgroundActive}: ${surfaceSolidDefaultActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceSolidDefault}; + ${chipTokens.colorReadOnly}: ${inverseTextPrimary}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${chipTokens.colorReadOnlyHover}: ${inverseTextPrimary}; + ${chipTokens.closeIconColor}: ${inverseTextSecondary}; + ${chipTokens.closeIconColorHover}: ${inverseTextSecondaryHover}; `, secondary: css` - ${chipTokens.color}: var(--text-primary); - ${chipTokens.background}: var(--surface-transparent-secondary); - ${chipTokens.colorHover}: var(--text-primary); - ${chipTokens.backgroundHover}: var(--surface-transparent-secondary-hover); - ${chipTokens.colorActive}: var(--text-primary); - ${chipTokens.backgroundActive}: var(--surface-transparent-secondary-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-secondary); - ${chipTokens.colorReadOnly}: var(--text-primary); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${chipTokens.colorReadOnlyHover}: var(--text-primary); - ${chipTokens.closeIconColor}: var(--text-secondary); - ${chipTokens.closeIconColorHover}: var(--text-secondary-hover); + ${chipTokens.color}: ${textPrimary}; + ${chipTokens.background}: ${surfaceTransparentSecondary}; + ${chipTokens.colorHover}: ${textPrimary}; + ${chipTokens.backgroundHover}: ${surfaceTransparentSecondaryHover}; + ${chipTokens.colorActive}: ${textPrimary}; + ${chipTokens.backgroundActive}: ${surfaceTransparentSecondaryActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentSecondary}; + ${chipTokens.colorReadOnly}: ${textPrimary}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${chipTokens.colorReadOnlyHover}: ${textPrimary}; + ${chipTokens.closeIconColor}: ${textSecondary}; + ${chipTokens.closeIconColorHover}: ${textSecondaryHover}; `, accent: css` - ${chipTokens.color}: var(--on-dark-text-primary); - ${chipTokens.background}: var(--surface-accent); - ${chipTokens.colorHover}: var(--on-dark-text-primary); - ${chipTokens.backgroundHover}: var(--surface-accent-hover); - ${chipTokens.colorActive}: var(--on-dark-text-primary); - ${chipTokens.backgroundActive}: var(--surface-accent-active); - ${chipTokens.backgroundReadOnly}: var(--surface-accent); - ${chipTokens.colorReadOnly}: var(--on-dark-text-primary); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-accent); - ${chipTokens.colorReadOnlyHover}: var(--on-dark-text-primary); - ${chipTokens.closeIconColor}: var(--on-dark-text-secondary); - ${chipTokens.closeIconColorHover}: var(--on-dark-text-secondary-hover); + ${chipTokens.color}: ${onDarkTextPrimary}; + ${chipTokens.background}: ${surfaceAccent}; + ${chipTokens.colorHover}: ${onDarkTextPrimary}; + ${chipTokens.backgroundHover}: ${surfaceAccentHover}; + ${chipTokens.colorActive}: ${onDarkTextPrimary}; + ${chipTokens.backgroundActive}: ${surfaceAccentActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceAccent}; + ${chipTokens.colorReadOnly}: ${onDarkTextPrimary}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceAccent}; + ${chipTokens.colorReadOnlyHover}: ${onDarkTextPrimary}; + ${chipTokens.closeIconColor}: ${onDarkTextSecondary}; + ${chipTokens.closeIconColorHover}: ${onDarkTextSecondaryHover}; `, positive: css` - ${chipTokens.color}: var(--on-dark-text-primary); - ${chipTokens.background}: var(--surface-positive); - ${chipTokens.colorHover}: var(--on-dark-text-primary); - ${chipTokens.backgroundHover}: var(--surface-positive-hover); - ${chipTokens.colorActive}: var(--on-dark-text-primary); - ${chipTokens.backgroundActive}: var(--surface-positive-active); - ${chipTokens.backgroundReadOnly}: var(--surface-positive); - ${chipTokens.colorReadOnly}: var(--on-dark-text-primary); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-positive); - ${chipTokens.colorReadOnlyHover}: var(--on-dark-text-primary); - ${chipTokens.closeIconColor}: var(--on-dark-text-secondary); - ${chipTokens.closeIconColorHover}: var(--on-dark-text-secondary-hover); + ${chipTokens.color}: ${onDarkTextPrimary}; + ${chipTokens.background}: ${surfacePositive}; + ${chipTokens.colorHover}: ${onDarkTextPrimary}; + ${chipTokens.backgroundHover}: ${surfacePositiveHover}; + ${chipTokens.colorActive}: ${onDarkTextPrimary}; + ${chipTokens.backgroundActive}: ${surfacePositiveActive}; + ${chipTokens.backgroundReadOnly}: ${surfacePositive}; + ${chipTokens.colorReadOnly}: ${onDarkTextPrimary}; + ${chipTokens.backgroundReadOnlyHover}: ${surfacePositive}; + ${chipTokens.colorReadOnlyHover}: ${onDarkTextPrimary}; + ${chipTokens.closeIconColor}: ${onDarkTextSecondary}; + ${chipTokens.closeIconColorHover}: ${onDarkTextSecondaryHover}; `, warning: css` - ${chipTokens.color}: var(--on-dark-text-primary); - ${chipTokens.background}: var(--surface-warning); - ${chipTokens.colorHover}: var(--on-dark-text-primary); - ${chipTokens.backgroundHover}: var(--surface-warning-hover); - ${chipTokens.colorActive}: var(--on-dark-text-primary); - ${chipTokens.backgroundActive}: var(--surface-warning-active); - ${chipTokens.backgroundReadOnly}: var(--surface-warning); - ${chipTokens.colorReadOnly}: var(--on-dark-text-primary); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-warning); - ${chipTokens.colorReadOnlyHover}: var(--on-dark-text-primary); - ${chipTokens.closeIconColor}: var(--on-dark-text-secondary); - ${chipTokens.closeIconColorHover}: var(--on-dark-text-secondary-hover); + ${chipTokens.color}: ${onDarkTextPrimary}; + ${chipTokens.background}: ${surfaceWarning}; + ${chipTokens.colorHover}: ${onDarkTextPrimary}; + ${chipTokens.backgroundHover}: ${surfaceWarningHover}; + ${chipTokens.colorActive}: ${onDarkTextPrimary}; + ${chipTokens.backgroundActive}: ${surfaceWarningActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceWarning}; + ${chipTokens.colorReadOnly}: ${onDarkTextPrimary}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceWarning}; + ${chipTokens.colorReadOnlyHover}: ${onDarkTextPrimary}; + ${chipTokens.closeIconColor}: ${onDarkTextSecondary}; + ${chipTokens.closeIconColorHover}: ${onDarkTextSecondaryHover}; `, negative: css` - ${chipTokens.color}: var(--on-dark-text-primary); - ${chipTokens.background}: var(--surface-negative); - ${chipTokens.colorHover}: var(--on-dark-text-primary); - ${chipTokens.backgroundHover}: var(--surface-negative-hover); - ${chipTokens.colorActive}: var(--on-dark-text-primary); - ${chipTokens.backgroundActive}: var(--surface-negative-active); - ${chipTokens.backgroundReadOnly}: var(--surface-negative); - ${chipTokens.colorReadOnly}: var(--on-dark-text-primary); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-negative); - ${chipTokens.colorReadOnlyHover}: var(--on-dark-text-primary); - ${chipTokens.closeIconColor}: var(--on-dark-text-secondary); - ${chipTokens.closeIconColorHover}: var(--on-dark-text-secondary-hover); + ${chipTokens.color}: ${onDarkTextPrimary}; + ${chipTokens.background}: ${surfaceNegative}; + ${chipTokens.colorHover}: ${onDarkTextPrimary}; + ${chipTokens.backgroundHover}: ${surfaceNegativeHover}; + ${chipTokens.colorActive}: ${onDarkTextPrimary}; + ${chipTokens.backgroundActive}: ${surfaceNegativeActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceNegative}; + ${chipTokens.colorReadOnly}: ${onDarkTextPrimary}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceNegative}; + ${chipTokens.colorReadOnlyHover}: ${onDarkTextPrimary}; + ${chipTokens.closeIconColor}: ${onDarkTextSecondary}; + ${chipTokens.closeIconColorHover}: ${onDarkTextSecondaryHover}; `, }, size: { @@ -103,12 +137,12 @@ export const config = { ${chipTokens.height}: 3rem; ${chipTokens.padding}: 0 1rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${chipTokens.fontFamily}: ${bodyL.fontFamily}; + ${chipTokens.fontSize}: ${bodyL.fontSize}; + ${chipTokens.fontStyle}: ${bodyL.fontStyle}; + ${chipTokens.fontWeight}: ${bodyL.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyL.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.5rem; @@ -125,12 +159,12 @@ export const config = { ${chipTokens.height}: 2.5rem; ${chipTokens.padding}: 0 0.875rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${chipTokens.fontFamily}: ${bodyM.fontFamily}; + ${chipTokens.fontSize}: ${bodyM.fontSize}; + ${chipTokens.fontStyle}: ${bodyM.fontStyle}; + ${chipTokens.fontWeight}: ${bodyM.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyM.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.375rem; @@ -147,12 +181,12 @@ export const config = { ${chipTokens.height}: 2rem; ${chipTokens.padding}: 0 0.875rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${chipTokens.fontFamily}: ${bodyS.fontFamily}; + ${chipTokens.fontSize}: ${bodyS.fontSize}; + ${chipTokens.fontStyle}: ${bodyS.fontStyle}; + ${chipTokens.fontWeight}: ${bodyS.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyS.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.25rem; @@ -169,12 +203,12 @@ export const config = { ${chipTokens.height}: 1.5rem; ${chipTokens.padding}: 0 0.625rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${chipTokens.fontFamily}: ${bodyXS.fontFamily}; + ${chipTokens.fontSize}: ${bodyXS.fontSize}; + ${chipTokens.fontStyle}: ${bodyXS.fontStyle}; + ${chipTokens.fontWeight}: ${bodyXS.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyXS.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.25rem; @@ -191,12 +225,12 @@ export const config = { ${chipTokens.height}: 1.25rem; ${chipTokens.padding}: 0 0.5rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${chipTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${chipTokens.fontSize}: ${bodyXXS.fontSize}; + ${chipTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${chipTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyXXS.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.125rem; @@ -214,7 +248,7 @@ export const config = { }, focused: { true: css` - ${chipTokens.focusColor}: var(--surface-accent); + ${chipTokens.focusColor}: ${surfaceAccent}; `, }, pilled: { diff --git a/packages/plasma-new-hope/src/examples/components/Chip/Chip.transparent.config.ts b/packages/plasma-new-hope/src/examples/components/Chip/Chip.transparent.config.ts index 5a20b4e2800..c195a26d2aa 100644 --- a/packages/plasma-new-hope/src/examples/components/Chip/Chip.transparent.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Chip/Chip.transparent.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceTransparentAccent, + surfaceTransparentAccentActive, + surfaceTransparentAccentHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { chipTokens } from '../../../components/Chip'; @@ -11,76 +41,76 @@ export const config = { variations: { view: { default: css` - ${chipTokens.color}: var(--text-primary); - ${chipTokens.background}: var(--surface-transparent-secondary); - ${chipTokens.colorHover}: var(--text-primary-hover); - ${chipTokens.backgroundHover}: var(--surface-transparent-secondary-hover); - ${chipTokens.colorActive}: var(--text-primary-active); - ${chipTokens.backgroundActive}: var(--surface-transparent-secondary-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-secondary); - ${chipTokens.colorReadOnly}: var(--text-primary); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${chipTokens.colorReadOnlyHover}: var(--text-primary); + ${chipTokens.color}: ${textPrimary}; + ${chipTokens.background}: ${surfaceTransparentSecondary}; + ${chipTokens.colorHover}: ${textPrimaryHover}; + ${chipTokens.backgroundHover}: ${surfaceTransparentSecondaryHover}; + ${chipTokens.colorActive}: ${textPrimaryActive}; + ${chipTokens.backgroundActive}: ${surfaceTransparentSecondaryActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentSecondary}; + ${chipTokens.colorReadOnly}: ${textPrimary}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${chipTokens.colorReadOnlyHover}: ${textPrimary}; `, secondary: css` - ${chipTokens.color}: var(--text-primary); - ${chipTokens.background}: var(--surface-transparent-secondary); - ${chipTokens.colorHover}: var(--text-primary-hover); - ${chipTokens.backgroundHover}: var(--surface-transparent-secondary-hover); - ${chipTokens.colorActive}: var(--text-primary-active); - ${chipTokens.backgroundActive}: var(--surface-transparent-secondary-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-secondary); - ${chipTokens.colorReadOnly}: var(--text-primary); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${chipTokens.colorReadOnlyHover}: var(--text-primary); + ${chipTokens.color}: ${textPrimary}; + ${chipTokens.background}: ${surfaceTransparentSecondary}; + ${chipTokens.colorHover}: ${textPrimaryHover}; + ${chipTokens.backgroundHover}: ${surfaceTransparentSecondaryHover}; + ${chipTokens.colorActive}: ${textPrimaryActive}; + ${chipTokens.backgroundActive}: ${surfaceTransparentSecondaryActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentSecondary}; + ${chipTokens.colorReadOnly}: ${textPrimary}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${chipTokens.colorReadOnlyHover}: ${textPrimary}; `, accent: css` - ${chipTokens.color}: var(--text-accent); - ${chipTokens.background}: var(--surface-transparent-accent); - ${chipTokens.colorHover}: var(--text-accent); - ${chipTokens.backgroundHover}: var(--surface-transparent-accent-hover); - ${chipTokens.colorActive}: var(--text-accent); - ${chipTokens.backgroundActive}: var(--surface-transparent-accent-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-accent); - ${chipTokens.colorReadOnly}: var(--text-accent); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-accent); - ${chipTokens.colorReadOnlyHover}: var(--text-accent); + ${chipTokens.color}: ${textAccent}; + ${chipTokens.background}: ${surfaceTransparentAccent}; + ${chipTokens.colorHover}: ${textAccent}; + ${chipTokens.backgroundHover}: ${surfaceTransparentAccentHover}; + ${chipTokens.colorActive}: ${textAccent}; + ${chipTokens.backgroundActive}: ${surfaceTransparentAccentActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentAccent}; + ${chipTokens.colorReadOnly}: ${textAccent}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentAccent}; + ${chipTokens.colorReadOnlyHover}: ${textAccent}; `, positive: css` - ${chipTokens.color}: var(--text-positive); - ${chipTokens.background}: var(--surface-transparent-positive); - ${chipTokens.colorHover}: var(--text-positive); - ${chipTokens.backgroundHover}: var(--surface-transparent-positive-hover); - ${chipTokens.colorActive}: var(--text-positive); - ${chipTokens.backgroundActive}: var(--surface-transparent-positive-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-positive); - ${chipTokens.colorReadOnly}: var(--text-positive); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-positive); - ${chipTokens.colorReadOnlyHover}: var(--text-positive); + ${chipTokens.color}: ${textPositive}; + ${chipTokens.background}: ${surfaceTransparentPositive}; + ${chipTokens.colorHover}: ${textPositive}; + ${chipTokens.backgroundHover}: ${surfaceTransparentPositiveHover}; + ${chipTokens.colorActive}: ${textPositive}; + ${chipTokens.backgroundActive}: ${surfaceTransparentPositiveActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentPositive}; + ${chipTokens.colorReadOnly}: ${textPositive}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentPositive}; + ${chipTokens.colorReadOnlyHover}: ${textPositive}; `, warning: css` - ${chipTokens.color}: var(--text-warning); - ${chipTokens.background}: var(--surface-transparent-warning); - ${chipTokens.colorHover}: var(--text-warning); - ${chipTokens.backgroundHover}: var(--surface-transparent-warning-hover); - ${chipTokens.colorActive}: var(--text-warning); - ${chipTokens.backgroundActive}: var(--surface-transparent-warning-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-warning); - ${chipTokens.colorReadOnly}: var(--text-warning); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-warning); - ${chipTokens.colorReadOnlyHover}: var(--text-warning); + ${chipTokens.color}: ${textWarning}; + ${chipTokens.background}: ${surfaceTransparentWarning}; + ${chipTokens.colorHover}: ${textWarning}; + ${chipTokens.backgroundHover}: ${surfaceTransparentWarningHover}; + ${chipTokens.colorActive}: ${textWarning}; + ${chipTokens.backgroundActive}: ${surfaceTransparentWarningActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentWarning}; + ${chipTokens.colorReadOnly}: ${textWarning}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentWarning}; + ${chipTokens.colorReadOnlyHover}: ${textWarning}; `, negative: css` - ${chipTokens.color}: var(--text-negative); - ${chipTokens.background}: var(--surface-transparent-negative); - ${chipTokens.colorHover}: var(--text-negative); - ${chipTokens.backgroundHover}: var(--surface-transparent-negative-hover); - ${chipTokens.colorActive}: var(--text-negative); - ${chipTokens.backgroundActive}: var(--surface-transparent-negative-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-negative); - ${chipTokens.colorReadOnly}: var(--text-negative); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-negative); - ${chipTokens.colorReadOnlyHover}: var(--text-negative); + ${chipTokens.color}: ${textNegative}; + ${chipTokens.background}: ${surfaceTransparentNegative}; + ${chipTokens.colorHover}: ${textNegative}; + ${chipTokens.backgroundHover}: ${surfaceTransparentNegativeHover}; + ${chipTokens.colorActive}: ${textNegative}; + ${chipTokens.backgroundActive}: ${surfaceTransparentNegativeActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentNegative}; + ${chipTokens.colorReadOnly}: ${textNegative}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentNegative}; + ${chipTokens.colorReadOnlyHover}: ${textNegative}; `, }, size: { @@ -91,12 +121,12 @@ export const config = { ${chipTokens.height}: 3rem; ${chipTokens.padding}: 0 1rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${chipTokens.fontFamily}: ${bodyL.fontFamily}; + ${chipTokens.fontSize}: ${bodyL.fontSize}; + ${chipTokens.fontStyle}: ${bodyL.fontStyle}; + ${chipTokens.fontWeight}: ${bodyL.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyL.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.5rem; @@ -113,12 +143,12 @@ export const config = { ${chipTokens.height}: 2.5rem; ${chipTokens.padding}: 0 0.875rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${chipTokens.fontFamily}: ${bodyM.fontFamily}; + ${chipTokens.fontSize}: ${bodyM.fontSize}; + ${chipTokens.fontStyle}: ${bodyM.fontStyle}; + ${chipTokens.fontWeight}: ${bodyM.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyM.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.375rem; @@ -135,12 +165,12 @@ export const config = { ${chipTokens.height}: 2rem; ${chipTokens.padding}: 0 0.875rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${chipTokens.fontFamily}: ${bodyS.fontFamily}; + ${chipTokens.fontSize}: ${bodyS.fontSize}; + ${chipTokens.fontStyle}: ${bodyS.fontStyle}; + ${chipTokens.fontWeight}: ${bodyS.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyS.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.25rem; @@ -157,12 +187,12 @@ export const config = { ${chipTokens.height}: 1.5rem; ${chipTokens.padding}: 0 0.625rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${chipTokens.fontFamily}: ${bodyXS.fontFamily}; + ${chipTokens.fontSize}: ${bodyXS.fontSize}; + ${chipTokens.fontStyle}: ${bodyXS.fontStyle}; + ${chipTokens.fontWeight}: ${bodyXS.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyXS.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.25rem; @@ -179,12 +209,12 @@ export const config = { ${chipTokens.height}: 1.25rem; ${chipTokens.padding}: 0 0.5rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${chipTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${chipTokens.fontSize}: ${bodyXXS.fontSize}; + ${chipTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${chipTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyXXS.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.125rem; @@ -202,7 +232,7 @@ export const config = { }, focused: { true: css` - ${chipTokens.focusColor}: var(--surface-accent); + ${chipTokens.focusColor}: ${surfaceAccent}; `, }, pilled: { diff --git a/packages/plasma-new-hope/src/examples/components/ChipGroup/ChipGroup.config.ts b/packages/plasma-new-hope/src/examples/components/ChipGroup/ChipGroup.config.ts index 8d2b69ea665..5ea803f92f6 100644 --- a/packages/plasma-new-hope/src/examples/components/ChipGroup/ChipGroup.config.ts +++ b/packages/plasma-new-hope/src/examples/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { chipGroupTokens as tokens } from '../../../components/ChipGroup'; @@ -10,28 +28,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -41,12 +59,12 @@ export const config = { ${tokens.chipHeight}: 3rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.5rem; @@ -62,12 +80,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -83,12 +101,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; @@ -104,12 +122,12 @@ export const config = { ${tokens.chipHeight}: 1.5rem; ${tokens.chipPadding}: 0 0.625rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/plasma-new-hope/src/examples/components/CodeField/CodeField.config.ts b/packages/plasma-new-hope/src/examples/components/CodeField/CodeField.config.ts index f16b9868039..65fde70c075 100644 --- a/packages/plasma-new-hope/src/examples/components/CodeField/CodeField.config.ts +++ b/packages/plasma-new-hope/src/examples/components/CodeField/CodeField.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodyXS, + outlineAccent, + surfaceAccent, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { codeFieldTokens as tokens } from '../../../components/CodeField'; @@ -11,19 +28,19 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--surface-accent); + ${tokens.caretColor}: ${surfaceAccent}; - ${tokens.captionColor}: var(--text-secondary); - ${tokens.captionColorError}: var(--text-negative); + ${tokens.captionColor}: ${textSecondary}; + ${tokens.captionColorError}: ${textNegative}; - ${tokens.codeColor}: var(--text-primary); - ${tokens.codeColorError}: var(--text-negative); - ${tokens.borderColorFocus}: var(--outline-accent); + ${tokens.codeColor}: ${textPrimary}; + ${tokens.codeColorError}: ${textNegative}; + ${tokens.borderColorFocus}: ${outlineAccent}; - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; `, }, size: { @@ -36,19 +53,19 @@ export const config = { ${tokens.codeItemWidth}: 2.75rem; ${tokens.codeItemHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.captionFontFamily}: ${bodyS.fontFamily}; + ${tokens.captionFontSize}: ${bodyS.fontSize}; + ${tokens.captionFontStyle}: ${bodyS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyS.lineHeight}; ${tokens.borderRadius}: 0.875rem; ${tokens.borderRadiusSegmented}: 0.375rem; @@ -63,19 +80,19 @@ export const config = { ${tokens.codeItemWidth}: 2.375rem; ${tokens.codeItemHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.captionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.captionFontSize}: ${bodyXS.fontSize}; + ${tokens.captionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyXS.lineHeight}; ${tokens.borderRadius}: 0.75rem; ${tokens.borderRadiusSegmented}: 0.25rem; diff --git a/packages/plasma-new-hope/src/examples/components/Combobox/Combobox.config.ts b/packages/plasma-new-hope/src/examples/components/Combobox/Combobox.config.ts index a90d92cfaa1..4e3e3fbb326 100644 --- a/packages/plasma-new-hope/src/examples/components/Combobox/Combobox.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Combobox/Combobox.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { comboboxNewTokens as tokens } from '../../../components/Combobox'; @@ -11,221 +42,221 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -245,20 +276,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -266,12 +297,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -294,12 +325,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 1rem; ${tokens.padding}: 0.125rem; @@ -321,19 +352,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -366,20 +397,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -387,12 +418,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -415,12 +446,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -442,19 +473,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -487,20 +518,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -508,12 +539,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -536,12 +567,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 0.625rem 0.875rem 0.625rem 0.875rem; ${tokens.padding}: 0.125rem; @@ -563,19 +594,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -608,20 +639,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -629,12 +660,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -657,12 +688,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 0.5rem 0.625rem 0.5rem 0.625rem; ${tokens.padding}: 0.125rem; @@ -684,19 +715,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -716,22 +747,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -744,12 +775,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -768,12 +799,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -791,13 +822,13 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Combobox/Legacy/Combobox.config.ts b/packages/plasma-new-hope/src/examples/components/Combobox/Legacy/Combobox.config.ts index bda5ba88255..ff855a331ba 100644 --- a/packages/plasma-new-hope/src/examples/components/Combobox/Legacy/Combobox.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Combobox/Legacy/Combobox.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + shadowDownSoftS, + surfaceAccent, + surfaceSolidCard, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { comboboxOldTokens as comboboxTokens } from '../../../../components/Combobox'; @@ -18,7 +38,7 @@ export const config = { ${comboboxTokens.paddingBottom}: 0.125rem; ${comboboxTokens.paddingLeft}: 0.125rem; - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerColor}: ${surfaceTransparentTertiary}; ${comboboxTokens.dividerHeight}: 0.063rem; ${comboboxTokens.dividerMarginTop}: 0; ${comboboxTokens.dividerMarginRight}: 0.5rem; @@ -33,12 +53,12 @@ export const config = { ${comboboxTokens.itemPaddingLeft}: 0.375rem; ${comboboxTokens.itemBorderRadius}: 0.375rem; ${comboboxTokens.itemContentLeftWidth}: 1.25rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${comboboxTokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${comboboxTokens.itemFontSize}: ${bodyXS.fontSize}; + ${comboboxTokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${comboboxTokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${comboboxTokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${comboboxTokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${comboboxTokens.chipGap}: 0.25rem; ${comboboxTokens.chipBorderRadius}: 0.125rem; @@ -48,12 +68,12 @@ export const config = { ${comboboxTokens.chipClearContentMarginLeft}: 0.25rem; ${comboboxTokens.chipClearContentMarginRight}: 0rem; ${comboboxTokens.chipCloseIconSize}: 0.75rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${comboboxTokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${comboboxTokens.chipFontSize}: ${bodyXS.fontSize}; + ${comboboxTokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${comboboxTokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${comboboxTokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${comboboxTokens.chipLineHeight}: ${bodyXS.lineHeight}; ${comboboxTokens.targetArrowRight}: 0.5rem; ${comboboxTokens.targetHeight}: 2rem; @@ -64,18 +84,18 @@ export const config = { ${comboboxTokens.targetPaddingWithInput}: 0 2.625rem 0 0.625rem; ${comboboxTokens.targetInnerTop}: 0.5rem; ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-xs-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${comboboxTokens.targetFontFamily}: ${bodyXS.fontFamily}; + ${comboboxTokens.targetFontSize}: ${bodyXS.fontSize}; + ${comboboxTokens.targetFontStyle}: ${bodyXS.fontStyle}; + ${comboboxTokens.targetFontWeight}: ${bodyXS.fontWeight}; + ${comboboxTokens.targetLetterSpacing}: ${bodyXS.letterSpacing}; + ${comboboxTokens.targetLineHeight}: ${bodyXS.lineHeight}; + ${comboboxTokens.targetLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${comboboxTokens.targetLabelInnerFontSize}: ${bodyXS.fontSize}; + ${comboboxTokens.targetLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${comboboxTokens.targetLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${comboboxTokens.targetLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${comboboxTokens.targetLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${comboboxTokens.width}: 100%; @@ -86,7 +106,7 @@ export const config = { ${comboboxTokens.paddingBottom}: 0.125rem; ${comboboxTokens.paddingLeft}: 0.125rem; - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerColor}: ${surfaceTransparentTertiary}; ${comboboxTokens.dividerHeight}: 0.063rem; ${comboboxTokens.dividerMarginTop}: 0; ${comboboxTokens.dividerMarginRight}: 0.75rem; @@ -101,12 +121,12 @@ export const config = { ${comboboxTokens.itemPaddingLeft}: 0.75rem; ${comboboxTokens.itemBorderRadius}: 0.5rem; ${comboboxTokens.itemContentLeftWidth}: 1.75rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${comboboxTokens.itemFontFamily}: ${bodyS.fontFamily}; + ${comboboxTokens.itemFontSize}: ${bodyS.fontSize}; + ${comboboxTokens.itemFontStyle}: ${bodyS.fontStyle}; + ${comboboxTokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${comboboxTokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${comboboxTokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${comboboxTokens.chipGap}: 0.25rem; ${comboboxTokens.chipBorderRadius}: 0.25rem; @@ -116,12 +136,12 @@ export const config = { ${comboboxTokens.chipClearContentMarginLeft}: 0.375rem; ${comboboxTokens.chipClearContentMarginRight}: 0rem; ${comboboxTokens.chipCloseIconSize}: 0.75rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${comboboxTokens.chipFontFamily}: ${bodyS.fontFamily}; + ${comboboxTokens.chipFontSize}: ${bodyS.fontSize}; + ${comboboxTokens.chipFontStyle}: ${bodyS.fontStyle}; + ${comboboxTokens.chipFontWeight}: ${bodyS.fontWeight}; + ${comboboxTokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${comboboxTokens.chipLineHeight}: ${bodyS.lineHeight}; ${comboboxTokens.targetArrowRight}: 0.75rem; ${comboboxTokens.targetHeight}: 2.5rem; @@ -132,18 +152,18 @@ export const config = { ${comboboxTokens.targetPaddingWithInput}: 0 3.125rem 0 0.625rem; ${comboboxTokens.targetInnerTop}: 0.5rem; ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-s-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${comboboxTokens.targetFontFamily}: ${bodyS.fontFamily}; + ${comboboxTokens.targetFontSize}: ${bodyS.fontSize}; + ${comboboxTokens.targetFontStyle}: ${bodyS.fontStyle}; + ${comboboxTokens.targetFontWeight}: ${bodyS.fontWeight}; + ${comboboxTokens.targetLetterSpacing}: ${bodyS.letterSpacing}; + ${comboboxTokens.targetLineHeight}: ${bodyS.lineHeight}; + ${comboboxTokens.targetLabelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${comboboxTokens.targetLabelInnerFontSize}: ${bodyXXS.fontSize}; + ${comboboxTokens.targetLabelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${comboboxTokens.targetLabelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${comboboxTokens.targetLabelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${comboboxTokens.targetLabelInnerLineHeight}: ${bodyXXS.lineHeight}; `, m: css` ${comboboxTokens.width}: 100%; @@ -154,7 +174,7 @@ export const config = { ${comboboxTokens.paddingBottom}: 0.125rem; ${comboboxTokens.paddingLeft}: 0.125rem; - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerColor}: ${surfaceTransparentTertiary}; ${comboboxTokens.dividerHeight}: 0.063rem; ${comboboxTokens.dividerMarginTop}: 0; ${comboboxTokens.dividerMarginRight}: 0.875rem; @@ -169,12 +189,12 @@ export const config = { ${comboboxTokens.itemPaddingLeft}: 0.875rem; ${comboboxTokens.itemBorderRadius}: 0.625rem; ${comboboxTokens.itemContentLeftWidth}: 1.75rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${comboboxTokens.itemFontFamily}: ${bodyM.fontFamily}; + ${comboboxTokens.itemFontSize}: ${bodyM.fontSize}; + ${comboboxTokens.itemFontStyle}: ${bodyM.fontStyle}; + ${comboboxTokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${comboboxTokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${comboboxTokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${comboboxTokens.chipGap}: 0.25rem; ${comboboxTokens.chipBorderRadius}: 0.375rem; @@ -184,12 +204,12 @@ export const config = { ${comboboxTokens.chipClearContentMarginLeft}: 0.5rem; ${comboboxTokens.chipClearContentMarginRight}: 0rem; ${comboboxTokens.chipCloseIconSize}: 1rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${comboboxTokens.chipFontFamily}: ${bodyM.fontFamily}; + ${comboboxTokens.chipFontSize}: ${bodyM.fontSize}; + ${comboboxTokens.chipFontStyle}: ${bodyM.fontStyle}; + ${comboboxTokens.chipFontWeight}: ${bodyM.fontWeight}; + ${comboboxTokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${comboboxTokens.chipLineHeight}: ${bodyM.lineHeight}; ${comboboxTokens.targetArrowRight}: 0.875rem; ${comboboxTokens.targetHeight}: 3rem; @@ -200,18 +220,18 @@ export const config = { ${comboboxTokens.targetPaddingWithInput}: 0 3.375rem 0 0.625rem; ${comboboxTokens.targetInnerTop}: 0.5rem; ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-m-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${comboboxTokens.targetFontFamily}: ${bodyM.fontFamily}; + ${comboboxTokens.targetFontSize}: ${bodyM.fontSize}; + ${comboboxTokens.targetFontStyle}: ${bodyM.fontStyle}; + ${comboboxTokens.targetFontWeight}: ${bodyM.fontWeight}; + ${comboboxTokens.targetLetterSpacing}: ${bodyM.letterSpacing}; + ${comboboxTokens.targetLineHeight}: ${bodyM.lineHeight}; + ${comboboxTokens.targetLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${comboboxTokens.targetLabelInnerFontSize}: ${bodyXS.fontSize}; + ${comboboxTokens.targetLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${comboboxTokens.targetLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${comboboxTokens.targetLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${comboboxTokens.targetLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${comboboxTokens.width}: 100%; @@ -222,7 +242,7 @@ export const config = { ${comboboxTokens.paddingBottom}: 0.125rem; ${comboboxTokens.paddingLeft}: 0.125rem; - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerColor}: ${surfaceTransparentTertiary}; ${comboboxTokens.dividerHeight}: 0.063rem; ${comboboxTokens.dividerMarginTop}: 0; ${comboboxTokens.dividerMarginRight}: 1rem; @@ -237,12 +257,12 @@ export const config = { ${comboboxTokens.itemPaddingLeft}: 1rem; ${comboboxTokens.itemBorderRadius}: 0.75rem; ${comboboxTokens.itemContentLeftWidth}: 1.875rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${comboboxTokens.itemFontFamily}: ${bodyL.fontFamily}; + ${comboboxTokens.itemFontSize}: ${bodyL.fontSize}; + ${comboboxTokens.itemFontStyle}: ${bodyL.fontStyle}; + ${comboboxTokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${comboboxTokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${comboboxTokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${comboboxTokens.chipGap}: 0.25rem; ${comboboxTokens.chipBorderRadius}: 0.5rem; @@ -252,12 +272,12 @@ export const config = { ${comboboxTokens.chipClearContentMarginLeft}: 0.625rem; ${comboboxTokens.chipClearContentMarginRight}: 0rem; ${comboboxTokens.chipCloseIconSize}: 1rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${comboboxTokens.chipFontFamily}: ${bodyM.fontFamily}; + ${comboboxTokens.chipFontSize}: ${bodyM.fontSize}; + ${comboboxTokens.chipFontStyle}: ${bodyM.fontStyle}; + ${comboboxTokens.chipFontWeight}: ${bodyM.fontWeight}; + ${comboboxTokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${comboboxTokens.chipLineHeight}: ${bodyM.lineHeight}; ${comboboxTokens.targetArrowRight}: 1rem; ${comboboxTokens.targetHeight}: 3.5rem; @@ -268,54 +288,54 @@ export const config = { ${comboboxTokens.targetPaddingWithInput}: 0 3.625rem 0 0.625rem; ${comboboxTokens.targetInnerTop}: 0.5rem; ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-l-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-l-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-l-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-l-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-l-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-s-line-height); + ${comboboxTokens.targetFontFamily}: ${bodyL.fontFamily}; + ${comboboxTokens.targetFontSize}: ${bodyL.fontSize}; + ${comboboxTokens.targetFontStyle}: ${bodyL.fontStyle}; + ${comboboxTokens.targetFontWeight}: ${bodyL.fontWeight}; + ${comboboxTokens.targetLetterSpacing}: ${bodyL.letterSpacing}; + ${comboboxTokens.targetLineHeight}: ${bodyL.lineHeight}; + ${comboboxTokens.targetLabelInnerFontFamily}: ${bodyS.fontFamily}; + ${comboboxTokens.targetLabelInnerFontSize}: ${bodyS.fontSize}; + ${comboboxTokens.targetLabelInnerFontStyle}: ${bodyS.fontStyle}; + ${comboboxTokens.targetLabelInnerFontWeight}: ${bodyS.fontWeight}; + ${comboboxTokens.targetLabelInnerLetterSpacing}: ${bodyS.letterSpacing}; + ${comboboxTokens.targetLabelInnerLineHeight}: ${bodyS.lineHeight}; `, }, view: { default: css` - ${comboboxTokens.targetColor}: var(--text-primary); - ${comboboxTokens.targetLabelColor}: var(--text-secondary); - ${comboboxTokens.targetArrowColor}: var(--text-secondary); - ${comboboxTokens.targetBackgroundColor}: var(--surface-transparent-primary); - ${comboboxTokens.targetBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${comboboxTokens.targetBackgroundColorActive}: var(--surface-transparent-primary-active); - ${comboboxTokens.targetBackgroundColorOpen}: var(--surface-transparent-secondary); + ${comboboxTokens.targetColor}: ${textPrimary}; + ${comboboxTokens.targetLabelColor}: ${textSecondary}; + ${comboboxTokens.targetArrowColor}: ${textSecondary}; + ${comboboxTokens.targetBackgroundColor}: ${surfaceTransparentPrimary}; + ${comboboxTokens.targetBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${comboboxTokens.targetBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${comboboxTokens.targetBackgroundColorOpen}: ${surfaceTransparentSecondary}; - ${comboboxTokens.background}: var(--surface-solid-card); - ${comboboxTokens.boxShadow}: var(--shadow-down-soft-s); + ${comboboxTokens.background}: ${surfaceSolidCard}; + ${comboboxTokens.boxShadow}: ${shadowDownSoftS}; ${comboboxTokens.itemBackground}: transparent; - ${comboboxTokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${comboboxTokens.itemBackgroundSelectedHover}: var(--surface-transparent-secondary); - ${comboboxTokens.itemColor}: var(--text-primary); - ${comboboxTokens.itemContentLeftColor}: var(--text-accent); + ${comboboxTokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${comboboxTokens.itemBackgroundSelectedHover}: ${surfaceTransparentSecondary}; + ${comboboxTokens.itemColor}: ${textPrimary}; + ${comboboxTokens.itemContentLeftColor}: ${textAccent}; - ${comboboxTokens.chipCloseIconColor}: var(--text-secondary); - ${comboboxTokens.chipColor}: var(--text-primary); - ${comboboxTokens.chipBackground}: var(--surface-transparent-secondary); - ${comboboxTokens.chipColorHover}: var(--text-primary); - ${comboboxTokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${comboboxTokens.chipColorActive}: var(--text-primary); - ${comboboxTokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${comboboxTokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${comboboxTokens.chipColorReadOnly}: var(--text-primary); - ${comboboxTokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${comboboxTokens.chipColorReadOnlyHover}: var(--text-primary); + ${comboboxTokens.chipCloseIconColor}: ${textSecondary}; + ${comboboxTokens.chipColor}: ${textPrimary}; + ${comboboxTokens.chipBackground}: ${surfaceTransparentSecondary}; + ${comboboxTokens.chipColorHover}: ${textPrimary}; + ${comboboxTokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${comboboxTokens.chipColorActive}: ${textPrimary}; + ${comboboxTokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${comboboxTokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${comboboxTokens.chipColorReadOnly}: ${textPrimary}; + ${comboboxTokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${comboboxTokens.chipColorReadOnlyHover}: ${textPrimary}; ${comboboxTokens.chipOpacityReadonly}: 0.72; ${comboboxTokens.disabledOpacity}: 0.4; - ${comboboxTokens.focusColor}: var(--surface-accent); + ${comboboxTokens.focusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Counter/Counter.config.ts b/packages/plasma-new-hope/src/examples/components/Counter/Counter.config.ts index 402bc447249..4f4ec92094b 100644 --- a/packages/plasma-new-hope/src/examples/components/Counter/Counter.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { counterTokens } from '../../../components/Counter'; @@ -10,32 +25,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -43,56 +58,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/DatePicker/DatePicker.clear.config.ts b/packages/plasma-new-hope/src/examples/components/DatePicker/DatePicker.clear.config.ts index 48ee2aaa2bf..0b75ab31d27 100644 --- a/packages/plasma-new-hope/src/examples/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/plasma-new-hope/src/examples/components/DatePicker/DatePicker.clear.config.ts @@ -1,3 +1,46 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { datePickerTokens as tokens } from '../../../components/DatePicker'; @@ -10,64 +53,64 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); + ${tokens.outlineFocusColor}: ${surfaceAccent}; ${tokens.background}: transparent; ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.focusColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.focusColor}: ${textAccent}; ${tokens.textFieldBackgroundColor}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -76,76 +119,76 @@ export const config = { ${tokens.textFieldBackgroundSuccessColor}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -154,12 +197,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -169,12 +212,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -200,30 +243,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}:0.82rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; @@ -241,46 +284,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -291,25 +334,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -320,12 +363,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -335,12 +378,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -371,30 +414,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -412,46 +455,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -462,25 +505,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -491,12 +534,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -506,12 +549,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -542,30 +585,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -583,46 +626,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -633,25 +676,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -662,12 +705,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -677,12 +720,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -713,30 +756,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -754,46 +797,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -804,25 +847,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -833,12 +876,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -848,12 +891,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -884,30 +927,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -925,46 +968,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -975,25 +1018,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -1010,12 +1053,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1024,7 +1067,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1035,12 +1078,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1049,15 +1092,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1070,12 +1113,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1094,12 +1137,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1118,15 +1161,15 @@ export const config = { readOnly: { true: css` ${tokens.backgroundReadOnly}: transparent; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/plasma-new-hope/src/examples/components/DatePicker/DatePicker.config.ts b/packages/plasma-new-hope/src/examples/components/DatePicker/DatePicker.config.ts index 698b99dce96..aa2f1556e5b 100644 --- a/packages/plasma-new-hope/src/examples/components/DatePicker/DatePicker.config.ts +++ b/packages/plasma-new-hope/src/examples/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { datePickerTokens as tokens } from '../../../components/DatePicker'; @@ -10,110 +52,110 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -122,12 +164,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -137,12 +179,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -166,30 +208,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -207,46 +249,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -257,25 +299,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -286,12 +328,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -301,12 +343,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -336,30 +378,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -377,46 +419,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -427,25 +469,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -456,12 +498,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -471,12 +513,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -506,30 +548,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -547,46 +589,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -597,25 +639,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -626,12 +668,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -641,12 +683,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -676,30 +718,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -717,46 +759,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -767,25 +809,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -796,12 +838,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -811,12 +853,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -846,30 +888,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -887,46 +929,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -937,25 +979,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -972,12 +1014,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -986,7 +1028,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -997,12 +1039,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1011,15 +1053,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1032,12 +1074,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1056,12 +1098,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1079,16 +1121,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/plasma-new-hope/src/examples/components/DateTimePicker/DateTimePicker.config.ts b/packages/plasma-new-hope/src/examples/components/DateTimePicker/DateTimePicker.config.ts index 9c9c8f20fc8..4e3bc0e86a6 100644 --- a/packages/plasma-new-hope/src/examples/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/plasma-new-hope/src/examples/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { dateTimePickerTokens as tokens } from 'src/components/DateTimePicker'; @@ -9,84 +49,84 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -105,30 +145,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -138,12 +178,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -160,46 +200,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.875rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.875rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.875rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -210,13 +250,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; @@ -229,21 +269,21 @@ export const config = { ${tokens.timePickerItemHeight}: 4rem; ${tokens.timePickerItemBorderRadius}: 0.875rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -264,30 +304,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -297,12 +337,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -319,46 +359,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -369,13 +409,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; @@ -388,21 +428,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3.5rem; ${tokens.timePickerItemBorderRadius}: 0.75rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -423,30 +463,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -456,12 +496,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -478,46 +518,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -528,13 +568,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; @@ -547,21 +587,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3rem; ${tokens.timePickerItemBorderRadius}: 0.625rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyM.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyM.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyM.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -582,30 +622,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -615,12 +655,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -637,46 +677,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -687,13 +727,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -706,21 +746,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -741,30 +781,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -774,12 +814,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -796,46 +836,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -846,13 +886,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -865,21 +905,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -954,12 +994,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -968,7 +1008,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -979,12 +1019,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -993,7 +1033,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -1003,12 +1043,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/plasma-new-hope/src/examples/components/Divider/Divider.config.ts b/packages/plasma-new-hope/src/examples/components/Divider/Divider.config.ts index 2c5a8b543ff..8bba9ef65c7 100644 --- a/packages/plasma-new-hope/src/examples/components/Divider/Divider.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { dividerTokens } from '../../../components/Divider'; @@ -11,17 +17,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/plasma-new-hope/src/examples/components/Drawer/Drawer.config.ts b/packages/plasma-new-hope/src/examples/components/Drawer/Drawer.config.ts index 0fe1c535656..023098e0d0d 100644 --- a/packages/plasma-new-hope/src/examples/components/Drawer/Drawer.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { drawerTokens } from '../../../components/Drawer'; @@ -10,11 +16,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/plasma-new-hope/src/examples/components/Dropdown/Dropdown.config.ts b/packages/plasma-new-hope/src/examples/components/Dropdown/Dropdown.config.ts index da7b29c77d3..adf7b744357 100644 --- a/packages/plasma-new-hope/src/examples/components/Dropdown/Dropdown.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,11 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { dropdownTokens as tokens } from '../../../components/Dropdown'; @@ -26,12 +34,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.5rem; ${tokens.dividerMarginBottomTight}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -39,12 +47,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.padding}: 0.125rem; @@ -63,12 +71,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -76,12 +84,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.padding}: 0.125rem; @@ -100,12 +108,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -113,12 +121,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 0.125rem; @@ -137,12 +145,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -150,12 +158,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.padding}: 0.125rem; @@ -174,12 +182,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.125rem; ${tokens.dividerMarginBottomTight}: 0.125rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -187,18 +195,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Editable/Editable.config.ts b/packages/plasma-new-hope/src/examples/components/Editable/Editable.config.ts index 7a91cc2d7c2..f7c906b6e1b 100644 --- a/packages/plasma-new-hope/src/examples/components/Editable/Editable.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Editable/Editable.config.ts @@ -1,3 +1,10 @@ +import { + backgroundPrimary, + textAccent, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { editableTokens } from '../../../components/Editable'; @@ -10,11 +17,11 @@ export const config = { variations: { view: { default: css` - ${editableTokens.editButtonBackground}: var(--background-primary); - ${editableTokens.editButtonColor}: var(--text-tertiary); - ${editableTokens.editButtonColorHover}: var(--text-primary); - ${editableTokens.placeholderColor}: var(--text-secondary); - ${editableTokens.caretColor}: var(--text-accent); + ${editableTokens.editButtonBackground}: ${backgroundPrimary}; + ${editableTokens.editButtonColor}: ${textTertiary}; + ${editableTokens.editButtonColorHover}: ${textPrimary}; + ${editableTokens.placeholderColor}: ${textSecondary}; + ${editableTokens.caretColor}: ${textAccent}; `, }, size: { diff --git a/packages/plasma-new-hope/src/examples/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/plasma-new-hope/src/examples/components/EmbedIconButton/EmbedIconButton.config.ts index e113234b579..939b5a9a630 100644 --- a/packages/plasma-new-hope/src/examples/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/plasma-new-hope/src/examples/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,31 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { embedIconButtonTokens } from '../../../components/EmbedIconButton'; @@ -11,46 +39,46 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, }, size: { @@ -59,12 +87,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -74,12 +102,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -89,12 +117,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -107,12 +135,12 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, invariants: css` ${embedIconButtonTokens.embedIconButtonDisabledOpacity}: 0.4; - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }; diff --git a/packages/plasma-new-hope/src/examples/components/EmptyState/EmptyState.config.ts b/packages/plasma-new-hope/src/examples/components/EmptyState/EmptyState.config.ts index ffcf5b8fbd3..48c97b3cc90 100644 --- a/packages/plasma-new-hope/src/examples/components/EmptyState/EmptyState.config.ts +++ b/packages/plasma-new-hope/src/examples/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { emptyStateTokens as tokens } from '../../../components/EmptyState'; @@ -15,12 +16,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -29,12 +30,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -43,12 +44,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -57,12 +58,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/File/File.config.ts b/packages/plasma-new-hope/src/examples/components/File/File.config.ts index 9f461b3374c..6a3f2e2a8b4 100644 --- a/packages/plasma-new-hope/src/examples/components/File/File.config.ts +++ b/packages/plasma-new-hope/src/examples/components/File/File.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { fileTokens as tokens } from 'src/components/File'; @@ -9,36 +25,36 @@ export const config = { variations: { view: { default: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-secondary); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textSecondary}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-solid-default); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; `, negative: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-negative); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textNegative}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-negative); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceNegative}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-negative); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceNegative}; `, }, size: { @@ -53,19 +69,19 @@ export const config = { ${tokens.cellGap}: 0.75rem; ${tokens.cellPaddingRightContent}: 0.75rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -95,19 +111,19 @@ export const config = { ${tokens.cellGap}: 0.625rem; ${tokens.cellPaddingRightContent}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -137,19 +153,19 @@ export const config = { ${tokens.cellGap}: 0.5rem; ${tokens.cellPaddingRightContent}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -179,19 +195,19 @@ export const config = { ${tokens.cellGap}: 0.375rem; ${tokens.cellPaddingRightContent}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 24; ${tokens.progressBarCircularHeight}: 1.5rem; diff --git a/packages/plasma-new-hope/src/examples/components/IconButton/IconButton.config.ts b/packages/plasma-new-hope/src/examples/components/IconButton/IconButton.config.ts index e817ef90a2d..26caeb1ae57 100644 --- a/packages/plasma-new-hope/src/examples/components/IconButton/IconButton.config.ts +++ b/packages/plasma-new-hope/src/examples/components/IconButton/IconButton.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { iconButtonTokens } from '../../../components/IconButton'; @@ -11,74 +51,74 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -87,12 +127,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 4rem; ${iconButtonTokens.iconButtonPadding}: 1.75rem; ${iconButtonTokens.iconButtonRadius}: 1rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -102,12 +142,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3.5rem; ${iconButtonTokens.iconButtonPadding}: 1.5rem; ${iconButtonTokens.iconButtonRadius}: 0.875rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -117,12 +157,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -132,12 +172,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -147,12 +187,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -165,12 +205,12 @@ export const config = { // }, // focused: { // true: css` - // ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + // ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; // `, // }, }, invariants: css` ${iconButtonTokens.iconButtonDisabledOpacity}: 0.4; - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }; diff --git a/packages/plasma-new-hope/src/examples/components/Indicator/Indicator.config.ts b/packages/plasma-new-hope/src/examples/components/Indicator/Indicator.config.ts index 34cd45414b4..ab5d779e4a0 100644 --- a/packages/plasma-new-hope/src/examples/components/Indicator/Indicator.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Indicator/Indicator.config.ts @@ -1,3 +1,13 @@ +import { + onDarkSurfaceSolidDefault, + onLightSurfaceSolidDefault, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { indicatorTokens as tokens } from '../../../components/Indicator'; @@ -10,28 +20,28 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--surface-solid-default); + ${tokens.color}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.color}: var(--surface-accent); + ${tokens.color}: ${surfaceAccent}; `, inactive: css` - ${tokens.color}: var(--surface-solid-tertiary); + ${tokens.color}: ${surfaceSolidTertiary}; `, positive: css` - ${tokens.color}: var(--surface-positive); + ${tokens.color}: ${surfacePositive}; `, warning: css` - ${tokens.color}: var(--surface-warning); + ${tokens.color}: ${surfaceWarning}; `, negative: css` - ${tokens.color}: var(--surface-negative); + ${tokens.color}: ${surfaceNegative}; `, black: css` - ${tokens.color}: var(--on-light-surface-solid-default); + ${tokens.color}: ${onLightSurfaceSolidDefault}; `, white: css` - ${tokens.color}: var(--on-dark-surface-solid-default); + ${tokens.color}: ${onDarkSurfaceSolidDefault}; `, }, size: { diff --git a/packages/plasma-new-hope/src/examples/components/InformationWrapper/InformationWrapper.config.ts b/packages/plasma-new-hope/src/examples/components/InformationWrapper/InformationWrapper.config.ts index 96446543417..87f2cec5753 100644 --- a/packages/plasma-new-hope/src/examples/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/plasma-new-hope/src/examples/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,18 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { informationWrapperTokens as tokens } from '../../../components/InformationWrapper'; @@ -10,50 +25,50 @@ export const config = { variations: { view: { default: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { l: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; @@ -65,29 +80,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -97,12 +112,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, m: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; @@ -114,29 +129,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -146,12 +161,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, s: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -163,29 +178,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -195,12 +210,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, xs: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; @@ -212,29 +227,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -246,10 +261,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -262,12 +277,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -286,12 +301,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; diff --git a/packages/plasma-new-hope/src/examples/components/Link/Link.config.ts b/packages/plasma-new-hope/src/examples/components/Link/Link.config.ts index 5860f657a88..e2eab6ba604 100644 --- a/packages/plasma-new-hope/src/examples/components/Link/Link.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Link/Link.config.ts @@ -1,3 +1,30 @@ +import { + textAccent, + textAccentActive, + textAccentHover, + textM, + textNegative, + textNegativeActive, + textNegativeHover, + textParagraph, + textParagraphActive, + textParagraphHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textTertiaryActive, + textTertiaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tokens } from '../../../components/Link/Link.tokens'; @@ -10,87 +37,87 @@ export const config = { variations: { view: { default: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.linkColor}: var(--text-primary); - ${tokens.linkColorHover}: var(--text-primary-hover); - ${tokens.linkColorActive}: var(--text-primary-active); - ${tokens.linkColorVisited}: var(--text-primary); - ${tokens.linkColorVisitedHover}: var(--text-primary-hover); - ${tokens.linkColorVisitedActive}: var(--text-primary-active); + ${tokens.linkFontFamily}: ${textM.fontFamily}; + ${tokens.linkColor}: ${textPrimary}; + ${tokens.linkColorHover}: ${textPrimaryHover}; + ${tokens.linkColorActive}: ${textPrimaryActive}; + ${tokens.linkColorVisited}: ${textPrimary}; + ${tokens.linkColorVisitedHover}: ${textPrimaryHover}; + ${tokens.linkColorVisitedActive}: ${textPrimaryActive}; ${tokens.linkUnderlineBorder}: 0; `, secondary: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.linkColor}: var(--text-secondary); - ${tokens.linkColorHover}: var(--text-secondary-hover); - ${tokens.linkColorActive}: var(--text-secondary-active); - ${tokens.linkColorVisited}: var(--text-secondary); - ${tokens.linkColorVisitedHover}: var(--text-secondary-hover); - ${tokens.linkColorVisitedActive}: var(--text-secondary-active); + ${tokens.linkFontFamily}: ${textM.fontFamily}; + ${tokens.linkColor}: ${textSecondary}; + ${tokens.linkColorHover}: ${textSecondaryHover}; + ${tokens.linkColorActive}: ${textSecondaryActive}; + ${tokens.linkColorVisited}: ${textSecondary}; + ${tokens.linkColorVisitedHover}: ${textSecondaryHover}; + ${tokens.linkColorVisitedActive}: ${textSecondaryActive}; ${tokens.linkUnderlineBorder}: 0; `, tertiary: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.linkColor}: var(--text-tertiary); - ${tokens.linkColorHover}: var(--text-tertiary-hover); - ${tokens.linkColorActive}: var(--text-tertiary-active); - ${tokens.linkColorVisited}: var(--text-tertiary); - ${tokens.linkColorVisitedHover}: var(--text-tertiary-hover); - ${tokens.linkColorVisitedActive}: var(--text-tertiary-active); + ${tokens.linkFontFamily}: ${textM.fontFamily}; + ${tokens.linkColor}: ${textTertiary}; + ${tokens.linkColorHover}: ${textTertiaryHover}; + ${tokens.linkColorActive}: ${textTertiaryActive}; + ${tokens.linkColorVisited}: ${textTertiary}; + ${tokens.linkColorVisitedHover}: ${textTertiaryHover}; + ${tokens.linkColorVisitedActive}: ${textTertiaryActive}; ${tokens.linkUnderlineBorder}: 0; `, paragraph: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.linkColor}: var(--text-paragraph); - ${tokens.linkColorHover}: var(--text-paragraph-hover); - ${tokens.linkColorActive}: var(--text-paragraph-active); - ${tokens.linkColorVisited}: var(--text-paragraph); - ${tokens.linkColorVisitedHover}: var(--text-paragraph-hover); - ${tokens.linkColorVisitedActive}: var(--text-paragraph-active); + ${tokens.linkFontFamily}: ${textM.fontFamily}; + ${tokens.linkColor}: ${textParagraph}; + ${tokens.linkColorHover}: ${textParagraphHover}; + ${tokens.linkColorActive}: ${textParagraphActive}; + ${tokens.linkColorVisited}: ${textParagraph}; + ${tokens.linkColorVisitedHover}: ${textParagraphHover}; + ${tokens.linkColorVisitedActive}: ${textParagraphActive}; ${tokens.linkUnderlineBorder}: 0; `, accent: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.linkColor}: var(--text-accent); - ${tokens.linkColorHover}: var(--text-accent-hover); - ${tokens.linkColorActive}: var(--text-accent-active); - ${tokens.linkColorVisited}: var(--text-accent); - ${tokens.linkColorVisitedHover}: var(--text-accent-hover); - ${tokens.linkColorVisitedActive}: var(--text-accent-active); + ${tokens.linkFontFamily}: ${textM.fontFamily}; + ${tokens.linkColor}: ${textAccent}; + ${tokens.linkColorHover}: ${textAccentHover}; + ${tokens.linkColorActive}: ${textAccentActive}; + ${tokens.linkColorVisited}: ${textAccent}; + ${tokens.linkColorVisitedHover}: ${textAccentHover}; + ${tokens.linkColorVisitedActive}: ${textAccentActive}; ${tokens.linkUnderlineBorder}: 0; `, positive: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.linkColor}: var(--text-positive); - ${tokens.linkColorHover}: var(--text-positive-hover); - ${tokens.linkColorActive}: var(--text-positive-active); - ${tokens.linkColorVisited}: var(--text-positive); - ${tokens.linkColorVisitedHover}: var(--text-positive-hover); - ${tokens.linkColorVisitedActive}: var(--text-positive-active); + ${tokens.linkFontFamily}: ${textM.fontFamily}; + ${tokens.linkColor}: ${textPositive}; + ${tokens.linkColorHover}: ${textPositiveHover}; + ${tokens.linkColorActive}: ${textPositiveActive}; + ${tokens.linkColorVisited}: ${textPositive}; + ${tokens.linkColorVisitedHover}: ${textPositiveHover}; + ${tokens.linkColorVisitedActive}: ${textPositiveActive}; ${tokens.linkUnderlineBorder}: 0; `, warning: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.linkColor}: var(--text-warning); - ${tokens.linkColorHover}: var(--text-warning-hover); - ${tokens.linkColorActive}: var(--text-warning-active); - ${tokens.linkColorVisited}: var(--text-warning); - ${tokens.linkColorVisitedHover}: var(--text-warning-hover); - ${tokens.linkColorVisitedActive}: var(--text-warning-active); + ${tokens.linkFontFamily}: ${textM.fontFamily}; + ${tokens.linkColor}: ${textWarning}; + ${tokens.linkColorHover}: ${textWarningHover}; + ${tokens.linkColorActive}: ${textWarningActive}; + ${tokens.linkColorVisited}: ${textWarning}; + ${tokens.linkColorVisitedHover}: ${textWarningHover}; + ${tokens.linkColorVisitedActive}: ${textWarningActive}; ${tokens.linkUnderlineBorder}: 0; `, negative: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.linkColor}: var(--text-negative); - ${tokens.linkColorHover}: var(--text-negative-hover); - ${tokens.linkColorActive}: var(--text-negative-active); - ${tokens.linkColorVisited}: var(--text-negative); - ${tokens.linkColorVisitedHover}: var(--text-negative-hover); - ${tokens.linkColorVisitedActive}: var(--text-negative-active); + ${tokens.linkFontFamily}: ${textM.fontFamily}; + ${tokens.linkColor}: ${textNegative}; + ${tokens.linkColorHover}: ${textNegativeHover}; + ${tokens.linkColorActive}: ${textNegativeActive}; + ${tokens.linkColorVisited}: ${textNegative}; + ${tokens.linkColorVisitedHover}: ${textNegativeHover}; + ${tokens.linkColorVisitedActive}: ${textNegativeActive}; ${tokens.linkUnderlineBorder}: 0; `, clear: css` - ${tokens.linkFontFamily}: var(--plasma-typo-text-m-font-family); + ${tokens.linkFontFamily}: ${textM.fontFamily}; ${tokens.linkColor}:inherit; ${tokens.linkColorHover}: inherit; ${tokens.linkColorActive}: inherit; @@ -107,7 +134,7 @@ export const config = { }, focused: { true: css` - ${tokens.linkColorFocus}: var(--text-accent); + ${tokens.linkColorFocus}: ${textAccent}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/LinkButton/LinkButton.config.ts b/packages/plasma-new-hope/src/examples/components/LinkButton/LinkButton.config.ts index 0c0cbe72e42..7ad713e1bf1 100644 --- a/packages/plasma-new-hope/src/examples/components/LinkButton/LinkButton.config.ts +++ b/packages/plasma-new-hope/src/examples/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { linkButtonTokens } from '../../../components/LinkButton'; @@ -10,70 +40,70 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, }, size: { @@ -81,12 +111,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 4rem; ${linkButtonTokens.linkButtonPadding}: 1.25rem 0; ${linkButtonTokens.linkButtonRadius}: 1rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.5rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -100,12 +130,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3.5rem; ${linkButtonTokens.linkButtonPadding}: 1rem 0; ${linkButtonTokens.linkButtonRadius}: 0.875rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -119,12 +149,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -138,12 +168,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -157,12 +187,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -176,12 +206,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 1.5rem; ${linkButtonTokens.linkButtonPadding}: 0.375rem 0; ${linkButtonTokens.linkButtonRadius}: 0.375rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 0.75rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/plasma-new-hope/src/examples/components/List/List.config.ts b/packages/plasma-new-hope/src/examples/components/List/List.config.ts index 1df3fd995ae..e8f0566868c 100644 --- a/packages/plasma-new-hope/src/examples/components/List/List.config.ts +++ b/packages/plasma-new-hope/src/examples/components/List/List.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { listTokens } from '../../../components/List'; @@ -10,13 +19,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -31,12 +40,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${listTokens.listItemFontFamily}: ${bodyXS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyXS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyXS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyXS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${listTokens.listItemPaddingTop}: 0.689rem; @@ -48,12 +57,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -65,12 +74,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -82,12 +91,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, xl: css` ${listTokens.listItemPaddingTop}: 1.3125rem; @@ -99,12 +108,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-new-hope/src/examples/components/Loader/Loader.config.ts b/packages/plasma-new-hope/src/examples/components/Loader/Loader.config.ts index ddac5158f45..49bdb5577e7 100644 --- a/packages/plasma-new-hope/src/examples/components/Loader/Loader.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Loader/Loader.config.ts @@ -1,3 +1,30 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + overlaySoft, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { loaderTokens } from '../../../components/Loader'; @@ -10,67 +37,67 @@ export const config = { variations: { view: { default: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-solid-default); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceSolidDefault}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-primary); + ${loaderTokens.spinnerColor}: ${textPrimary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, secondary: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceTransparentSecondary}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-secondary); + ${loaderTokens.spinnerColor}: ${textSecondary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, accent: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-accent); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceAccent}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-accent); + ${loaderTokens.spinnerColor}: ${textAccent}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, positive: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-positive); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfacePositive}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-positive); + ${loaderTokens.spinnerColor}: ${textPositive}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, warning: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-warning); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceWarning}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-warning); + ${loaderTokens.spinnerColor}: ${textWarning}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, negative: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-negative); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceNegative}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-negative); + ${loaderTokens.spinnerColor}: ${textNegative}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, info: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-info); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceInfo}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-info); + ${loaderTokens.spinnerColor}: ${textInfo}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, }, size: { @@ -83,12 +110,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 8rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h2.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h2.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h2.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h2Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h2.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h2.lineHeight}; ${loaderTokens.spinnerSize}: 8rem; `, @@ -101,12 +128,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 5.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h5.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h5.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h5.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h5Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h5.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h5.lineHeight}; ${loaderTokens.spinnerSize}: 5.5rem; `, @@ -119,12 +146,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyL.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyL.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyL.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyL.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyL.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyL.lineHeight}; ${loaderTokens.spinnerSize}: 3.5rem; `, @@ -137,12 +164,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyM.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyM.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyM.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyM.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyM.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyM.lineHeight}; ${loaderTokens.spinnerSize}: 3rem; `, @@ -155,12 +182,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 2.25rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyS.lineHeight}; ${loaderTokens.spinnerSize}: 2.25rem; `, @@ -173,12 +200,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXS.lineHeight}; ${loaderTokens.spinnerSize}: 1.5rem; `, @@ -191,12 +218,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXXS.lineHeight}; ${loaderTokens.spinnerSize}: 1rem; `, diff --git a/packages/plasma-new-hope/src/examples/components/Modal/Modal.config.ts b/packages/plasma-new-hope/src/examples/components/Modal/Modal.config.ts index a49498910a4..4b785764a23 100644 --- a/packages/plasma-new-hope/src/examples/components/Modal/Modal.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Modal/Modal.config.ts @@ -1,3 +1,12 @@ +import { + overlayBlur, + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { modalTokens } from '../../../components/Modal'; @@ -9,17 +18,17 @@ export const config = { variations: { view: { default: css` - ${modalTokens.modalOverlayWithBlurColor}: var(--overlay-blur); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayWithBlurColor}: ${overlayBlur}; + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/NavigationDrawer/NavigationDrawer.config.ts b/packages/plasma-new-hope/src/examples/components/NavigationDrawer/NavigationDrawer.config.ts index 423882d9e73..7a66c6f5dc1 100644 --- a/packages/plasma-new-hope/src/examples/components/NavigationDrawer/NavigationDrawer.config.ts +++ b/packages/plasma-new-hope/src/examples/components/NavigationDrawer/NavigationDrawer.config.ts @@ -1,3 +1,15 @@ +import { + bodyM, + bodyS, + bodyXXS, + shadowDownSoftS, + surfaceSolidCard, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textTertiaryActive, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { navigationDrawerTokens } from '../../../components/NavigationDrawer'; @@ -10,41 +22,41 @@ export const config = { variations: { view: { default: css` - ${navigationDrawerTokens.sidebarBoxShadow}: var(--shadow-down-soft-s); + ${navigationDrawerTokens.sidebarBoxShadow}: ${shadowDownSoftS}; ${navigationDrawerTokens.sidebarPadding}: 1.25rem 0.75rem 0.75rem 0.75rem; ${navigationDrawerTokens.sidebarGap}: 0.625rem; ${navigationDrawerTokens.sidebarWidth}: 250px; - ${navigationDrawerTokens.sidebarBackground}: var(--surface-solid-card); + ${navigationDrawerTokens.sidebarBackground}: ${surfaceSolidCard}; - ${navigationDrawerTokens.sectionColor}: var(--text-tertiary-active); + ${navigationDrawerTokens.sectionColor}: ${textTertiaryActive}; ${navigationDrawerTokens.sectionFontSize}: 0.75rem; ${navigationDrawerTokens.sectionHeaderGap}: 0.75rem; ${navigationDrawerTokens.menuItemGap}: 0.75rem; ${navigationDrawerTokens.menuItemPadding}: 0.75rem; ${navigationDrawerTokens.menuItemBorderRadius}: 0.625rem; - ${navigationDrawerTokens.menuItemSelectedColor}: var(--surface-transparent-secondary); - ${navigationDrawerTokens.menuItemHoverColor}: var(--surface-transparent-secondary-hover); + ${navigationDrawerTokens.menuItemSelectedColor}: ${surfaceTransparentSecondary}; + ${navigationDrawerTokens.menuItemHoverColor}: ${surfaceTransparentSecondaryHover}; ${navigationDrawerTokens.menuItemDisabledOpacity}: 0.4; ${navigationDrawerTokens.menuItemIndicatorSize}: 0.5rem; - ${navigationDrawerTokens.menuItemIndicatorColor}: var(--surface-solid-default); + ${navigationDrawerTokens.menuItemIndicatorColor}: ${surfaceSolidDefault}; - ${navigationDrawerTokens.dividerColor}: var(--surface-transparent-tertiary); + ${navigationDrawerTokens.dividerColor}: ${surfaceTransparentTertiary}; ${navigationDrawerTokens.dividerHeight}: 1px; - ${navigationDrawerTokens.overlayBackground}: var(--surface-transparent-secondary); + ${navigationDrawerTokens.overlayBackground}: ${surfaceTransparentSecondary}; ${navigationDrawerTokens.counterBorderRadius}: 1rem; ${navigationDrawerTokens.counterHeight}: 1rem; ${navigationDrawerTokens.counterPadding}: 0 0.125rem; - ${navigationDrawerTokens.counterBackground}: var(--surface-solid-default); - ${navigationDrawerTokens.counterColor}: var(--surface-solid-card); - ${navigationDrawerTokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${navigationDrawerTokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size); - ${navigationDrawerTokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${navigationDrawerTokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${navigationDrawerTokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${navigationDrawerTokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${navigationDrawerTokens.counterBackground}: ${surfaceSolidDefault}; + ${navigationDrawerTokens.counterColor}: ${surfaceSolidCard}; + ${navigationDrawerTokens.counterFontFamily}: ${bodyXXS.fontFamily}; + ${navigationDrawerTokens.counterFontSize}: ${bodyXXS.fontSize}; + ${navigationDrawerTokens.counterFontStyle}: ${bodyXXS.fontStyle}; + ${navigationDrawerTokens.counterFontWeight}: ${bodyXXS.fontWeight}; + ${navigationDrawerTokens.counterLetterSpacing}: ${bodyXXS.letterSpacing}; + ${navigationDrawerTokens.counterLineHeight}: ${bodyXXS.lineHeight}; `, }, size: { @@ -56,11 +68,11 @@ export const config = { ${navigationDrawerTokens.sectionPadding}: 0.625rem 0.75rem; ${navigationDrawerTokens.sectionBorderRadius}: 0.625rem; ${navigationDrawerTokens.iconMargin}: 1px 0 0 1px; - ${navigationDrawerTokens.menuItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${navigationDrawerTokens.menuItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${navigationDrawerTokens.menuItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${navigationDrawerTokens.menuItemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${navigationDrawerTokens.menuItemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${navigationDrawerTokens.menuItemFontFamily}: ${bodyS.fontFamily}; + ${navigationDrawerTokens.menuItemFontStyle}: ${bodyS.fontStyle}; + ${navigationDrawerTokens.menuItemFontWeight}: ${bodyS.fontWeight}; + ${navigationDrawerTokens.menuItemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${navigationDrawerTokens.menuItemFontLineHeight}: ${bodyS.lineHeight}; ${navigationDrawerTokens.menuItemContentLeftSize}: 1.5rem; ${navigationDrawerTokens.menuItemContentLeftMargin}: 0.5rem; `, @@ -72,11 +84,11 @@ export const config = { ${navigationDrawerTokens.sectionPadding}: 0.75rem; ${navigationDrawerTokens.sectionBorderRadius}: 0.75rem; ${navigationDrawerTokens.iconMargin}: 2px 0 0 2px; - ${navigationDrawerTokens.menuItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${navigationDrawerTokens.menuItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${navigationDrawerTokens.menuItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${navigationDrawerTokens.menuItemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${navigationDrawerTokens.menuItemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${navigationDrawerTokens.menuItemFontFamily}: ${bodyM.fontFamily}; + ${navigationDrawerTokens.menuItemFontStyle}: ${bodyM.fontStyle}; + ${navigationDrawerTokens.menuItemFontWeight}: ${bodyM.fontWeight}; + ${navigationDrawerTokens.menuItemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${navigationDrawerTokens.menuItemFontLineHeight}: ${bodyM.lineHeight}; ${navigationDrawerTokens.menuItemContentLeftSize}: 2.25rem; ${navigationDrawerTokens.menuItemContentLeftMargin}: 0.375rem; `, diff --git a/packages/plasma-new-hope/src/examples/components/Note/Note.config.ts b/packages/plasma-new-hope/src/examples/components/Note/Note.config.ts index 7e7849cf37a..dc7cf0d6819 100644 --- a/packages/plasma-new-hope/src/examples/components/Note/Note.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Note/Note.config.ts @@ -1,3 +1,25 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textL, + textLBold, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textSecondary, + textSecondaryHover, + textWarning, + textXS, + textXSBold, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { noteTokens as tokens } from '../../../components/Note'; @@ -10,29 +32,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -46,8 +68,8 @@ export const config = { ${tokens.closeIconTop}: 1rem; ${tokens.closeIconRight}: 1rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -55,20 +77,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 2rem; ${tokens.fixedContentBeforePadding}: 0.25rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.titleFontFamily}: ${textL.fontFamily}; + ${tokens.titleFontSize}: ${textL.fontSize}; + ${tokens.titleFontStyle}: ${textL.fontStyle}; + ${tokens.titleFontWeight}: ${textLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textL.letterSpacing}; + ${tokens.titleLineHeight}: ${textL.lineHeight}; ${tokens.titlePaddingRight}: 1.875rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.textFontFamily}: ${textL.fontFamily}; + ${tokens.textFontSize}: ${textL.fontSize}; + ${tokens.textFontStyle}: ${textL.fontStyle}; + ${tokens.textFontWeight}: ${textL.fontWeight}; + ${tokens.textLetterSpacing}: ${textL.letterSpacing}; + ${tokens.textLineHeight}: ${textL.lineHeight}; `, m: css` ${tokens.padding}: 1.25rem 1.5rem; @@ -80,8 +102,8 @@ export const config = { ${tokens.closeIconTop}: 0.75rem; ${tokens.closeIconRight}: 0.75rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -89,20 +111,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; ${tokens.titlePaddingRight}: 1.75rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -114,8 +136,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -123,20 +145,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.titleFontFamily}: ${textS.fontFamily}; + ${tokens.titleFontSize}: ${textS.fontSize}; + ${tokens.titleFontStyle}: ${textS.fontStyle}; + ${tokens.titleFontWeight}: ${textSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; + ${tokens.titleLineHeight}: ${textS.lineHeight}; ${tokens.titlePaddingRight}: 1.625rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.textFontFamily}: ${textS.fontFamily}; + ${tokens.textFontSize}: ${textS.fontSize}; + ${tokens.textFontStyle}: ${textS.fontStyle}; + ${tokens.textFontWeight}: ${textS.fontWeight}; + ${tokens.textLetterSpacing}: ${textS.letterSpacing}; + ${tokens.textLineHeight}: ${textS.lineHeight}; `, xs: css` ${tokens.padding}: 0.75rem 1rem; @@ -148,8 +170,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1rem; ${tokens.closeIconButtonSize}: 1rem; @@ -157,20 +179,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.titleFontFamily}: ${textXS.fontFamily}; + ${tokens.titleFontSize}: ${textXS.fontSize}; + ${tokens.titleFontStyle}: ${textXS.fontStyle}; + ${tokens.titleFontWeight}: ${textXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.titleLineHeight}: ${textXS.lineHeight}; ${tokens.titlePaddingRight}: 1.5rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.textFontFamily}: ${textXS.fontFamily}; + ${tokens.textFontSize}: ${textXS.fontSize}; + ${tokens.textFontStyle}: ${textXS.fontStyle}; + ${tokens.textFontWeight}: ${textXS.fontWeight}; + ${tokens.textLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.textLineHeight}: ${textXS.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Notification/Notification.config.ts b/packages/plasma-new-hope/src/examples/components/Notification/Notification.config.ts index 52d064df5e9..c25f665f58c 100644 --- a/packages/plasma-new-hope/src/examples/components/Notification/Notification.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { notificationTokens } from '../../../components/Notification'; @@ -10,10 +22,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -42,32 +54,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -96,32 +108,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -150,32 +162,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -204,32 +216,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -258,22 +270,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/plasma-new-hope/src/examples/components/NumberInput/NumberInput.config.ts b/packages/plasma-new-hope/src/examples/components/NumberInput/NumberInput.config.ts index daab47cc4dc..5acbfe55b64 100644 --- a/packages/plasma-new-hope/src/examples/components/NumberInput/NumberInput.config.ts +++ b/packages/plasma-new-hope/src/examples/components/NumberInput/NumberInput.config.ts @@ -1,3 +1,40 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseSurfaceTransparentSecondary, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextTertiary, + onDarkSurfaceTransparentSecondary, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextTertiary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { numberInputTokens as tokens } from '../../../components/NumberInput'; @@ -12,26 +49,26 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-solid-default); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${inverseSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceSolidDefault}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -39,26 +76,26 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, secondary: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.iconButtonColorSolidActive}: var(--text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -66,27 +103,27 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, accent: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--inverse-text-primary); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--on-dark-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--on-dark-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-accent); - - ${tokens.iconButtonColor}: var(--on-dark-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-accent); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${inverseTextPrimary}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${onDarkTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${onDarkTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${onDarkSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceAccent}; + + ${tokens.iconButtonColor}: ${onDarkTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${onDarkTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${onDarkTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -94,25 +131,25 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, clear: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; ${tokens.backgroundColorSolid}: transparent; - ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonColor}: ${textPrimary}; ${tokens.iconButtonBackgroundColor}: transparent; - ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; ${tokens.iconButtonBackgroundColorHover}: transparent; - ${tokens.iconButtonColorActive}: var(--text-primary-active); + ${tokens.iconButtonColorActive}: ${textPrimaryActive}; ${tokens.iconButtonBackgroundColorActive}: transparent; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -127,12 +164,12 @@ export const config = { ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${tokens.iconButtonRadius}: 0.875rem; ${tokens.iconButtonSegmentationRadius}: 0.375rem; @@ -142,12 +179,12 @@ export const config = { ${tokens.textWrapperHeight}: 3.5rem; ${tokens.textWrapperPadding}: 1.063rem 1.125rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -159,12 +196,12 @@ export const config = { ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -174,12 +211,12 @@ export const config = { ${tokens.textWrapperHeight}: 3rem; ${tokens.textWrapperPadding}: 0.875rem 1rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -191,12 +228,12 @@ export const config = { ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 1rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.625rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -206,12 +243,12 @@ export const config = { ${tokens.textWrapperHeight}: 2.5rem; ${tokens.textWrapperPadding}: 0.688rem 0.875rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -223,12 +260,12 @@ export const config = { ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.75rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${tokens.iconButtonRadius}: 0.5rem; ${tokens.iconButtonSegmentationRadius}: 0.125rem; @@ -238,12 +275,12 @@ export const config = { ${tokens.textWrapperHeight}: 2rem; ${tokens.textWrapperPadding}: 0.563rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -259,8 +296,8 @@ export const config = { }, inputBackgroundType: { fill: css` - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimary}; `, clear: css` ${tokens.backgroundColor}: transparent; diff --git a/packages/plasma-new-hope/src/examples/components/Pagination/Pagination.config.ts b/packages/plasma-new-hope/src/examples/components/Pagination/Pagination.config.ts index 209eac120ee..337df465e4d 100644 --- a/packages/plasma-new-hope/src/examples/components/Pagination/Pagination.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Pagination/Pagination.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { paginationTokens } from '../../../components/Pagination'; @@ -11,129 +41,129 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; ${paginationTokens.inputBorderColor}:transparent; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, }, size: { l: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-l-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-l-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-l-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-l-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyL.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyL.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyL.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyLBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyL.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyL.lineHeight}; ${paginationTokens.buttonHeight}: 3.5rem; ${paginationTokens.buttonWidth}: 3rem; @@ -169,12 +199,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, m: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; @@ -210,12 +240,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; @@ -251,12 +281,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, xs: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-xs-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-xs-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-xs-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyXS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyXS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyXS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyXSBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyXS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyXS.lineHeight}; ${paginationTokens.buttonHeight}: 2rem; ${paginationTokens.paginationInputWidth}: 2.5rem; diff --git a/packages/plasma-new-hope/src/examples/components/Panel/Panel.config.ts b/packages/plasma-new-hope/src/examples/components/Panel/Panel.config.ts index 5c60ff96453..43a78261e93 100644 --- a/packages/plasma-new-hope/src/examples/components/Panel/Panel.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Panel/Panel.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard, surfaceTransparentPrimary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { panelTokens } from '../../../components/Panel'; @@ -11,9 +12,9 @@ export const config = { variations: { view: { default: css` - ${panelTokens.background}: var(--surface-solid-card); + ${panelTokens.background}: ${surfaceSolidCard}; ${panelTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${panelTokens.contentBackgroundColor}: var(--surface-transparent-primary); + ${panelTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; `, }, size: { diff --git a/packages/plasma-new-hope/src/examples/components/Popover/Popover.config.ts b/packages/plasma-new-hope/src/examples/components/Popover/Popover.config.ts index 61925683013..087a6f50959 100644 --- a/packages/plasma-new-hope/src/examples/components/Popover/Popover.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { popoverTokens } from '../../../components/Popover'; @@ -9,14 +10,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Progress/Progress.config.ts b/packages/plasma-new-hope/src/examples/components/Progress/Progress.config.ts index 342e136534e..b96c7e374d6 100644 --- a/packages/plasma-new-hope/src/examples/components/Progress/Progress.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Progress/Progress.config.ts @@ -1,3 +1,14 @@ +import { + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { progressTokens } from '../../../components/Progress'; @@ -10,39 +21,39 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, primary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, success: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, error: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/plasma-new-hope/src/examples/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/plasma-new-hope/src/examples/components/ProgressBarCircular/ProgressBarCircular.config.ts index 9b629be209c..4cd518631c5 100644 --- a/packages/plasma-new-hope/src/examples/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/plasma-new-hope/src/examples/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { progressBarCircularTokens } from '../../../components/ProgressBarCircular'; @@ -10,39 +30,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -52,12 +72,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -65,12 +85,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -78,12 +98,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -91,12 +111,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -104,12 +124,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -117,12 +137,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -130,12 +150,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Radiobox/Radiobox.config.ts b/packages/plasma-new-hope/src/examples/components/Radiobox/Radiobox.config.ts index 9da46b1874e..4ccf97482c3 100644 --- a/packages/plasma-new-hope/src/examples/components/Radiobox/Radiobox.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { radioboxTokens } from '../../../components/Radiobox'; @@ -21,19 +37,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.5rem; ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,19 +60,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.625rem; ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${radioboxTokens.margin}: 0; @@ -67,19 +83,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.625rem; ${radioboxTokens.contentTopOffset}: 0.0625rem; ${radioboxTokens.contentLeftOffset}: 0.75rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyL.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -87,74 +103,74 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${radioboxTokens.fillColor}: var(--text-primary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPrimary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${radioboxTokens.fillColor}: var(--text-secondary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textSecondary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${radioboxTokens.fillColor}: var(--text-tertiary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textTertiary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${radioboxTokens.fillColor}: var(--text-paragraph); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textParagraph}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${radioboxTokens.fillColor}: var(--text-positive); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPositive}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${radioboxTokens.fillColor}: var(--text-warning); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textWarning}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated negative: css` - ${radioboxTokens.fillColor}: var(--text-negative); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textNegative}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -165,7 +181,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Range/Range.clear.config.ts b/packages/plasma-new-hope/src/examples/components/Range/Range.clear.config.ts index 48b6f22d15f..995e3e1030e 100644 --- a/packages/plasma-new-hope/src/examples/components/Range/Range.clear.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Range/Range.clear.config.ts @@ -1,3 +1,31 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { rangeTokens as tokens } from '../../../components/Range'; @@ -16,57 +44,57 @@ export const config = { ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); - - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldBackgroundColorHover}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -77,15 +105,15 @@ export const config = { ${tokens.textFieldBackgroundSuccessColorHover}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; `, }, size: { @@ -93,12 +121,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.5rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -106,24 +134,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -141,22 +169,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -170,12 +198,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -183,24 +211,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -218,22 +246,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -247,12 +275,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -260,24 +288,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -295,22 +323,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -324,12 +352,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -337,24 +365,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -372,22 +400,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -401,12 +429,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -414,24 +442,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -449,22 +477,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -477,10 +505,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -493,12 +521,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -517,12 +545,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -540,16 +568,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Range/Range.config.ts b/packages/plasma-new-hope/src/examples/components/Range/Range.config.ts index a1a69e98d3f..be609e13f52 100644 --- a/packages/plasma-new-hope/src/examples/components/Range/Range.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Range/Range.config.ts @@ -1,3 +1,32 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { rangeTokens as tokens } from '../../../components/Range'; @@ -12,55 +41,55 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorHover}: var(--surface-transparent-negative-hover); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorHover}: var(--surface-transparent-positive-hover); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -68,12 +97,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -81,24 +110,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 4rem; @@ -116,22 +145,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -144,12 +173,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -157,24 +186,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -192,22 +221,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -220,12 +249,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -233,24 +262,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -268,22 +297,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -296,12 +325,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -309,24 +338,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -344,22 +373,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -372,12 +401,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -385,24 +414,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -420,22 +449,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -447,10 +476,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -463,12 +492,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -487,12 +516,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -510,16 +539,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Rating/Rating.config.ts b/packages/plasma-new-hope/src/examples/components/Rating/Rating.config.ts index 10dafc05083..268d580ca6d 100644 --- a/packages/plasma-new-hope/src/examples/components/Rating/Rating.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Rating/Rating.config.ts @@ -1,3 +1,36 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + bodyXXS, + bodyXXSBold, + dsplL, + dsplLBold, + dsplM, + dsplMBold, + dsplS, + dsplSBold, + h1, + h1Bold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { ratingTokens as tokens } from '../../../components/Rating'; @@ -10,36 +43,36 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; // TODO: change with token data-yellow, when it will be added to theme ${tokens.iconColor}: #F3A912; - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { l: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -50,19 +83,19 @@ export const config = { m: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -73,19 +106,19 @@ export const config = { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -96,19 +129,19 @@ export const config = { xs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.iconMarginBottom}: 0.125rem; ${tokens.contentGap}: 0.375rem; @@ -123,19 +156,19 @@ export const config = { xxs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.fontFamily}: ${bodyXXS.fontFamily}; + ${tokens.fontSize}: ${bodyXXS.fontSize}; + ${tokens.fontStyle}: ${bodyXXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.contentGap}: 0.375rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -148,19 +181,19 @@ export const config = { h1: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tokens.fontFamily}: ${h1.fontFamily}; + ${tokens.fontSize}: ${h1.fontSize}; + ${tokens.fontStyle}: ${h1.fontStyle}; + ${tokens.fontWeight}: ${h1Bold.fontWeight}; + ${tokens.letterSpacing}: ${h1.letterSpacing}; + ${tokens.lineHeight}: ${h1.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.helperTextFontFamily}: ${bodyM.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyM.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyM.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyM.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyM.lineHeight}; ${tokens.contentGap}: 1rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -179,19 +212,19 @@ export const config = { h2: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tokens.fontFamily}: ${h2.fontFamily}; + ${tokens.fontSize}: ${h2.fontSize}; + ${tokens.fontStyle}: ${h2.fontStyle}; + ${tokens.fontWeight}: ${h2Bold.fontWeight}; + ${tokens.letterSpacing}: ${h2.letterSpacing}; + ${tokens.lineHeight}: ${h2.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.875rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -210,19 +243,19 @@ export const config = { h3: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.fontFamily}: ${h3.fontFamily}; + ${tokens.fontSize}: ${h3.fontSize}; + ${tokens.fontStyle}: ${h3.fontStyle}; + ${tokens.fontWeight}: ${h3Bold.fontWeight}; + ${tokens.letterSpacing}: ${h3.letterSpacing}; + ${tokens.lineHeight}: ${h3.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.75rem; ${tokens.singleIconContentGap}: 0.375rem; @@ -241,19 +274,19 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.fontFamily}: ${h4.fontFamily}; + ${tokens.fontSize}: ${h4.fontSize}; + ${tokens.fontStyle}: ${h4.fontStyle}; + ${tokens.fontWeight}: ${h4Bold.fontWeight}; + ${tokens.letterSpacing}: ${h4.letterSpacing}; + ${tokens.lineHeight}: ${h4.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -272,19 +305,19 @@ export const config = { h5: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.fontFamily}: ${h5.fontFamily}; + ${tokens.fontSize}: ${h5.fontSize}; + ${tokens.fontStyle}: ${h5.fontStyle}; + ${tokens.fontWeight}: ${h5Bold.fontWeight}; + ${tokens.letterSpacing}: ${h5.letterSpacing}; + ${tokens.lineHeight}: ${h5.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -303,19 +336,19 @@ export const config = { h6: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tokens.fontFamily}: ${h6.fontFamily}; + ${tokens.fontSize}: ${h6.fontSize}; + ${tokens.fontStyle}: ${h6.fontStyle}; + ${tokens.fontWeight}: ${h6Bold.fontWeight}; + ${tokens.letterSpacing}: ${h6.letterSpacing}; + ${tokens.lineHeight}: ${h6.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -334,19 +367,19 @@ export const config = { displayL: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${tokens.fontFamily}: ${dsplL.fontFamily}; + ${tokens.fontSize}: ${dsplL.fontSize}; + ${tokens.fontStyle}: ${dsplL.fontStyle}; + ${tokens.fontWeight}: ${dsplLBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplL.letterSpacing}; + ${tokens.lineHeight}: ${dsplL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.helperTextFontFamily}: ${h3.fontFamily}; + ${tokens.helperTextFontSize}: ${h3.fontSize}; + ${tokens.helperTextFontStyle}: ${h3.fontStyle}; + ${tokens.helperTextFontWeight}: ${h3.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing}; + ${tokens.helperTextLineHeight}: ${h3.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -365,19 +398,19 @@ export const config = { displayM: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${tokens.fontFamily}: ${dsplM.fontFamily}; + ${tokens.fontSize}: ${dsplM.fontSize}; + ${tokens.fontStyle}: ${dsplM.fontStyle}; + ${tokens.fontWeight}: ${dsplMBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplM.letterSpacing}; + ${tokens.lineHeight}: ${dsplM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -396,19 +429,19 @@ export const config = { displayS: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${dsplS.fontFamily}; + ${tokens.fontSize}: ${dsplS.fontSize}; + ${tokens.fontStyle}: ${dsplS.fontStyle}; + ${tokens.fontWeight}: ${dsplSBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplS.letterSpacing}; + ${tokens.lineHeight}: ${dsplS.lineHeight}; + + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; diff --git a/packages/plasma-new-hope/src/examples/components/Segment/SegmentGroup.config.ts b/packages/plasma-new-hope/src/examples/components/Segment/SegmentGroup.config.ts index fca54120b77..6841e19be06 100644 --- a/packages/plasma-new-hope/src/examples/components/Segment/SegmentGroup.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { segmentTokens } from '../../../components/Segment'; @@ -10,14 +11,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, }, size: { @@ -76,7 +77,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary}; `, }, orientation: { diff --git a/packages/plasma-new-hope/src/examples/components/Segment/SegmentItem.config.ts b/packages/plasma-new-hope/src/examples/components/Segment/SegmentItem.config.ts index 42fa71649e6..ca8003de8aa 100644 --- a/packages/plasma-new-hope/src/examples/components/Segment/SegmentItem.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Segment/SegmentItem.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { segmentTokens } from '../../../components/Segment'; @@ -10,68 +34,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -85,12 +109,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${segmentTokens.itemBorderRadius}: 0.625rem; @@ -102,12 +126,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -119,12 +143,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, l: css` ${segmentTokens.itemBorderRadius}: 0.875rem; @@ -136,12 +160,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, xl: css` ${segmentTokens.itemBorderRadius}: 1rem; @@ -153,12 +177,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-new-hope/src/examples/components/Sheet/Sheet.config.ts b/packages/plasma-new-hope/src/examples/components/Sheet/Sheet.config.ts index e4eb5ac9c22..958b1461590 100644 --- a/packages/plasma-new-hope/src/examples/components/Sheet/Sheet.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Sheet/Sheet.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceSolidTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { sheetTokens } from '../../../components/Sheet'; @@ -10,10 +16,10 @@ export const config = { variations: { view: { default: css` - ${sheetTokens.sheetOverlayColor}: var(--overlay-soft); - ${sheetTokens.sheetOverlayWithBlurColor}: var(--overlay-blur); - ${sheetTokens.contentBackgroundColor}: var(--surface-solid-card); - ${sheetTokens.handleBackgroundColor}: var(--surface-solid-tertiary); + ${sheetTokens.sheetOverlayColor}: ${overlaySoft}; + ${sheetTokens.sheetOverlayWithBlurColor}: ${overlayBlur}; + ${sheetTokens.contentBackgroundColor}: ${surfaceSolidCard}; + ${sheetTokens.handleBackgroundColor}: ${surfaceSolidTertiary}; `, }, handlePlacement: { diff --git a/packages/plasma-new-hope/src/examples/components/Skeleton/LineSkeleton.config.ts b/packages/plasma-new-hope/src/examples/components/Skeleton/LineSkeleton.config.ts index 05912ef6f98..4092996efd3 100644 --- a/packages/plasma-new-hope/src/examples/components/Skeleton/LineSkeleton.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Skeleton/LineSkeleton.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + dsplL, + dsplM, + dsplS, + h1, + h2, + h3, + h4, + h5, + h6, + surfaceSkeletonDeepGradient, + surfaceSkeletonGradient, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textL, + textM, + textS, + textXS, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { skeletonTokens } from '../../../components/Skeleton'; @@ -10,88 +34,88 @@ export const config = { variations: { view: { default: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient, var(--surface-skeleton-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, lighter: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient-lighter, var(--surface-skeleton-deep-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonDeepGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, }, size: { bodyL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size); + ${skeletonTokens.lineHeight}: ${bodyL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyL.fontSize}; `, bodyM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size); + ${skeletonTokens.lineHeight}: ${bodyM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyM.fontSize}; `, bodyS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size); + ${skeletonTokens.lineHeight}: ${bodyS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyS.fontSize}; `, bodyXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXS.fontSize}; `, bodyXXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXXS.fontSize}; `, dsplL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size); + ${skeletonTokens.lineHeight}: ${dsplL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplL.fontSize}; `, dsplM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size); + ${skeletonTokens.lineHeight}: ${dsplM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplM.fontSize}; `, dsplS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size); + ${skeletonTokens.lineHeight}: ${dsplS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplS.fontSize}; `, h1: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size); + ${skeletonTokens.lineHeight}: ${h1.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h1.fontSize}; `, h2: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size); + ${skeletonTokens.lineHeight}: ${h2.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h2.fontSize}; `, h3: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size); + ${skeletonTokens.lineHeight}: ${h3.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h3.fontSize}; `, h4: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size); + ${skeletonTokens.lineHeight}: ${h4.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h4.fontSize}; `, h5: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); + ${skeletonTokens.lineHeight}: ${h5.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h5.fontSize}; `, h6: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + ${skeletonTokens.lineHeight}: ${h6.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h6.fontSize}; `, textL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); + ${skeletonTokens.lineHeight}: ${textL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textL.fontSize}; `, textM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size); + ${skeletonTokens.lineHeight}: ${textM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textM.fontSize}; `, textS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size); + ${skeletonTokens.lineHeight}: ${textS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textS.fontSize}; `, textXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size); + ${skeletonTokens.lineHeight}: ${textXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textXS.fontSize}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Slider/Slider.config.ts b/packages/plasma-new-hope/src/examples/components/Slider/Slider.config.ts index ce5abfd5d21..af7afef23ba 100644 --- a/packages/plasma-new-hope/src/examples/components/Slider/Slider.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Slider/Slider.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + surfaceAccent, + surfaceAccentGradient, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { sliderTokens } from '../../../components/Slider'; @@ -10,70 +27,70 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, gradient: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent-gradient); + ${sliderTokens.fillColor}: ${surfaceAccentGradient}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, }, size: { @@ -87,24 +104,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -121,12 +138,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -138,24 +155,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -172,12 +189,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -189,24 +206,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -223,12 +240,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-new-hope/src/examples/components/Spinner/Spinner.config.ts b/packages/plasma-new-hope/src/examples/components/Spinner/Spinner.config.ts index 67ffc8e7b9d..8c3bbf9379c 100644 --- a/packages/plasma-new-hope/src/examples/components/Spinner/Spinner.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Spinner/Spinner.config.ts @@ -1,3 +1,13 @@ +import { + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { spinnerTokens } from '../../../components/Spinner'; @@ -21,28 +31,28 @@ export const config = { }, view: { default: css` - ${spinnerTokens.color}: var(--text-primary); + ${spinnerTokens.color}: ${textPrimary}; `, secondary: css` - ${spinnerTokens.color}: var(--text-secondary); + ${spinnerTokens.color}: ${textSecondary}; `, tertiary: css` - ${spinnerTokens.color}: var(--text-tertiary); + ${spinnerTokens.color}: ${textTertiary}; `, paragraph: css` - ${spinnerTokens.color}: var(--text-paragraph); + ${spinnerTokens.color}: ${textParagraph}; `, accent: css` - ${spinnerTokens.color}: var(--text-accent); + ${spinnerTokens.color}: ${textAccent}; `, positive: css` - ${spinnerTokens.color}: var(--text-positive); + ${spinnerTokens.color}: ${textPositive}; `, warning: css` - ${spinnerTokens.color}: var(--text-warning); + ${spinnerTokens.color}: ${textWarning}; `, negative: css` - ${spinnerTokens.color}: var(--text-negative); + ${spinnerTokens.color}: ${textNegative}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Steps/Steps.config.ts b/packages/plasma-new-hope/src/examples/components/Steps/Steps.config.ts index 8ea201f7e11..901d29f4584 100644 --- a/packages/plasma-new-hope/src/examples/components/Steps/Steps.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Steps/Steps.config.ts @@ -1,44 +1,74 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { stepsTokens as tokens } from '../../../components/Steps'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -50,10 +80,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -63,26 +93,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -103,33 +133,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.5rem; ${tokens.largeBulletIndentHeight}: 1.25rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyL.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyM.fontFamily}; + ${tokens.contentFontSize}: ${bodyM.fontSize}; + ${tokens.contentFontStyle}: ${bodyM.fontStyle}; + ${tokens.contentFontWeight}: ${bodyM.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyM.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -150,33 +180,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -197,33 +227,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -244,33 +274,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 0.75rem; ${tokens.largeBulletIndentHeight}: 0.5rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -281,8 +311,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/plasma-new-hope/src/examples/components/Switch/Switch.config.ts b/packages/plasma-new-hope/src/examples/components/Switch/Switch.config.ts index 413f682376b..d96b647598a 100644 --- a/packages/plasma-new-hope/src/examples/components/Switch/Switch.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { switchTokens } from '../../../components/Switch'; @@ -13,50 +26,50 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -85,17 +98,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -106,7 +119,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Table/Table.config.ts b/packages/plasma-new-hope/src/examples/components/Table/Table.config.ts index afd2752d942..a8c2c9af2fe 100644 --- a/packages/plasma-new-hope/src/examples/components/Table/Table.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + surfaceTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tableTokens as tokens } from '../../../components/Table/Table.tokens'; @@ -18,12 +30,12 @@ export const config = { }, size: { l: css` - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.headerRowHeight}: 3.125rem; ${tokens.rowHeight}: 3.125rem; @@ -33,9 +45,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.5rem; ${tokens.editableCellIconButtonWidth}: 3rem; @@ -44,18 +56,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.875rem; ${tokens.editableCellInputPadding}: 0 0.75rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.75rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.875rem; @@ -65,12 +77,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -78,20 +90,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.5rem 0.875rem; ${tokens.selectControlPanelGap}: 0.5rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight}; `, m: css` - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.headerRowHeight}: 2.75rem; ${tokens.rowHeight}: 2.75rem; @@ -101,9 +113,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.375rem; ${tokens.editableCellIconButtonWidth}: 2.5rem; @@ -112,18 +124,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.625rem; ${tokens.editableCellInputPadding}: 0 0.625rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.75rem; @@ -133,12 +145,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -146,20 +158,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.75rem; ${tokens.selectControlPanelGap}: 0.625rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, s: css` - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.headerRowHeight}: 2.125rem; ${tokens.rowHeight}: 2.125rem; @@ -169,9 +181,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.25rem; ${tokens.editableCellIconButtonWidth}: 2rem; @@ -180,18 +192,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.5rem; ${tokens.editableCellInputPadding}: 0 0.375rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.25rem 0.5rem; ${tokens.buttonHeight}: 1.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.625rem; @@ -201,12 +213,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.25rem 0 0; ${tokens.selectItemIconSize}: 1rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 0.875rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -214,12 +226,12 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.5rem; ${tokens.selectControlPanelGap}: 0.25rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 20057131e54..ec4bf72269a 100644 --- a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,13 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tabsTokens } from '../../../../components/Tabs'; @@ -10,78 +20,78 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; diff --git a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabItem.config.ts index e705ac66d33..28020334e55 100644 --- a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h1, + h2, + h3, + h4, + h5, + h6, + inverseTextPrimary, + inverseTextSecondary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tabsTokens } from '../../../../components/Tabs'; @@ -10,106 +36,106 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -125,12 +151,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -144,12 +170,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -163,12 +189,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -182,12 +208,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -199,12 +225,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tabsTokens.fontFamily}: ${h6.fontFamily}; + ${tabsTokens.fontSize}: ${h6.fontSize}; + ${tabsTokens.fontStyle}: ${h6.fontStyle}; + ${tabsTokens.fontWeight}: ${h6.fontWeight}; + ${tabsTokens.letterSpacing}: ${h6.letterSpacing}; + ${tabsTokens.lineHeight}: ${h6.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -216,12 +242,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -233,12 +259,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -250,12 +276,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -267,12 +293,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -284,12 +310,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabs.config.ts index 1fa1e77127c..40518d7b312 100644 --- a/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tabsTokens } from '../../../../components/Tabs'; @@ -10,36 +18,36 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(--text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/plasma-new-hope/src/examples/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/plasma-new-hope/src/examples/components/Tabs/vertical/VerticalIconTabItem.config.ts index 7f2f68b7438..10f1ea3e1f6 100644 --- a/packages/plasma-new-hope/src/examples/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tabsTokens } from '../../../../components/Tabs'; @@ -10,22 +17,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/plasma-new-hope/src/examples/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/plasma-new-hope/src/examples/components/Tabs/vertical/VerticalTabItem.config.ts index a9a4a72ccd7..83c2a0f8c08 100644 --- a/packages/plasma-new-hope/src/examples/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tabsTokens } from '../../../../components/Tabs'; @@ -10,31 +26,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -51,12 +67,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -71,12 +87,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -91,12 +107,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -111,12 +127,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/plasma-new-hope/src/examples/components/Tabs/vertical/VerticalTabs.config.ts b/packages/plasma-new-hope/src/examples/components/Tabs/vertical/VerticalTabs.config.ts index e0d042eebfc..ca595d9257a 100644 --- a/packages/plasma-new-hope/src/examples/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tabsTokens } from '../../../../components/Tabs'; @@ -10,15 +17,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(--text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/plasma-new-hope/src/examples/components/TextArea/TextArea.clear.config.ts b/packages/plasma-new-hope/src/examples/components/TextArea/TextArea.clear.config.ts index bc5cac32170..6397d65261a 100644 --- a/packages/plasma-new-hope/src/examples/components/TextArea/TextArea.clear.config.ts +++ b/packages/plasma-new-hope/src/examples/components/TextArea/TextArea.clear.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { textAreaTokens as tokens } from '../../../components/TextArea'; @@ -21,31 +44,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` ${tokens.inputBackgroundColor}: transparent; @@ -58,31 +81,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-positive); - ${tokens.inputColorFocus}: var(--text-positive); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPositive}; + ${tokens.inputColorFocus}: ${textPositive}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` ${tokens.inputBackgroundColor}: transparent; @@ -95,31 +118,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-warning); - ${tokens.inputColorFocus}: var(--text-warning); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textWarning}; + ${tokens.inputColorFocus}: ${textWarning}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` ${tokens.inputBackgroundColor}: transparent; @@ -132,31 +155,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-negative); - ${tokens.inputColorFocus}: var(--text-negative); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textNegative}; + ${tokens.inputColorFocus}: ${textNegative}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -186,30 +209,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -227,12 +250,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -260,30 +283,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -301,12 +324,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -334,30 +357,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -375,12 +398,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -408,30 +431,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -449,12 +472,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -482,30 +505,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -523,24 +546,24 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; ${tokens.tooltipBoxShadow}: var( --shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08) ); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -553,12 +576,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -577,12 +600,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -600,9 +623,9 @@ export const config = { }, readOnly: { true: css` - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/plasma-new-hope/src/examples/components/TextArea/TextArea.config.ts b/packages/plasma-new-hope/src/examples/components/TextArea/TextArea.config.ts index 4b167a9689d..071db0fa4bc 100644 --- a/packages/plasma-new-hope/src/examples/components/TextArea/TextArea.config.ts +++ b/packages/plasma-new-hope/src/examples/components/TextArea/TextArea.config.ts @@ -1,3 +1,41 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { textAreaTokens as tokens } from '../../../components/TextArea'; @@ -10,168 +48,168 @@ export const config = { variations: { view: { default: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-primary); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-primary); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-positive); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-positive); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-positive); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textPositive}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-warning); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-warning); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-warning); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textWarning}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-negative); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-negative); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -200,30 +238,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -241,12 +279,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.751rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -273,30 +311,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -314,12 +352,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -346,30 +384,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -389,12 +427,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -421,30 +459,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.5rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -462,12 +500,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -494,30 +532,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.375rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -535,20 +573,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -561,12 +599,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -585,12 +623,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -604,18 +642,18 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/TextField/TextField.clear.config.ts b/packages/plasma-new-hope/src/examples/components/TextField/TextField.clear.config.ts index e868a422fc4..886fffaae9b 100644 --- a/packages/plasma-new-hope/src/examples/components/TextField/TextField.clear.config.ts +++ b/packages/plasma-new-hope/src/examples/components/TextField/TextField.clear.config.ts @@ -1,3 +1,52 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { textFieldTokens as tokens } from '../../../components/TextField'; @@ -11,132 +60,132 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-positive); + ${tokens.color}: ${textPositive}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-positive); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textPositive}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-positive); - ${tokens.contentSlotColorHover}: var(--text-positive-hover); - ${tokens.contentSlotColorActive}: var(--text-positive-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPositive}; + ${tokens.contentSlotColorHover}: ${textPositiveHover}; + ${tokens.contentSlotColorActive}: ${textPositiveActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-warning); + ${tokens.color}: ${textWarning}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-warning); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textWarning}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-warning); - ${tokens.contentSlotColorHover}: var(--text-warning-hover); - ${tokens.contentSlotColorActive}: var(--text-warning-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textWarning}; + ${tokens.contentSlotColorHover}: ${textWarningHover}; + ${tokens.contentSlotColorActive}: ${textWarningActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-negative); + ${tokens.color}: ${textNegative}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-negative); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textNegative}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -153,40 +202,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -202,19 +251,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -237,40 +286,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -285,12 +334,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -313,40 +362,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -361,12 +410,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -389,40 +438,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -437,12 +486,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -465,40 +514,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -513,12 +562,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -533,126 +582,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -665,12 +714,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -689,12 +738,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -713,13 +762,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); + ${tokens.colorReadOnly}: ${textPrimary}; ${tokens.backgroundColorReadOnly}: transparent; - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/plasma-new-hope/src/examples/components/TextField/TextField.config.ts b/packages/plasma-new-hope/src/examples/components/TextField/TextField.config.ts index 4ca5e4201c2..2711bb81c93 100644 --- a/packages/plasma-new-hope/src/examples/components/TextField/TextField.config.ts +++ b/packages/plasma-new-hope/src/examples/components/TextField/TextField.config.ts @@ -1,3 +1,56 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { textFieldTokens as tokens } from '../../../components/TextField'; @@ -11,120 +64,120 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-positive); - ${tokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPositive}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-warning); - ${tokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentWarning}; + ${tokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -137,40 +190,40 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -186,19 +239,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -221,20 +274,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -242,20 +295,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -268,12 +321,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -299,20 +352,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -320,20 +373,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -346,12 +399,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -377,20 +430,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -398,20 +451,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -424,12 +477,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -455,20 +508,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -476,20 +529,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -502,12 +555,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -522,126 +575,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -654,12 +707,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -678,12 +731,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -702,13 +755,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/plasma-new-hope/src/examples/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/plasma-new-hope/src/examples/components/TextFieldGroup/TextFieldGroup.config.ts index 6f92d5bf742..576e32217bb 100644 --- a/packages/plasma-new-hope/src/examples/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/plasma-new-hope/src/examples/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { textFieldGroupTokens as tokens } from '../../../components/TextFieldGroup'; @@ -23,28 +24,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -57,12 +58,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.textFieldDefaultRadius}: 0.75rem; @@ -79,28 +80,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -113,12 +114,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -135,28 +136,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -169,12 +170,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.textFieldSegmentedRadius}: 0.125rem; @@ -191,28 +192,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -225,12 +226,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/plasma-new-hope/src/examples/components/TextFieldSlider/TextFieldSlider.clear.config.ts b/packages/plasma-new-hope/src/examples/components/TextFieldSlider/TextFieldSlider.clear.config.ts index 74f26ad02d6..6e6902f4397 100644 --- a/packages/plasma-new-hope/src/examples/components/TextFieldSlider/TextFieldSlider.clear.config.ts +++ b/packages/plasma-new-hope/src/examples/components/TextFieldSlider/TextFieldSlider.clear.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + textAccent, + textNegative, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tokens } from '../../../components/TextFieldSlider/TextFieldSlider.tokens'; @@ -11,10 +37,10 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -27,45 +53,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -78,45 +104,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-positive); - ${tokens.textFieldContentSlotColorHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColor}: ${textPositive}; + ${tokens.textFieldContentSlotColorHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorActive}: ${textPositiveActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-positive); + ${tokens.scaleValueColor}: ${textPositive}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -129,45 +155,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -180,50 +206,50 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-negative); + ${tokens.scaleValueColor}: ${textNegative}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -237,38 +263,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -290,12 +316,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -307,38 +333,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -360,12 +386,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -377,38 +403,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -430,12 +456,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -447,38 +473,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -500,12 +526,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -517,38 +543,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -570,20 +596,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -596,12 +622,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -620,12 +646,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -643,12 +669,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/plasma-new-hope/src/examples/components/TextFieldSlider/TextFieldSlider.config.ts b/packages/plasma-new-hope/src/examples/components/TextFieldSlider/TextFieldSlider.config.ts index b855b0d7afa..3e83c793aa3 100644 --- a/packages/plasma-new-hope/src/examples/components/TextFieldSlider/TextFieldSlider.config.ts +++ b/packages/plasma-new-hope/src/examples/components/TextFieldSlider/TextFieldSlider.config.ts @@ -1,3 +1,35 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tokens } from '../../../components/TextFieldSlider/TextFieldSlider.tokens'; @@ -11,207 +43,207 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; - ${tokens.textFieldBorderColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldBorderColorHover}: var(--text-secondary); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldBorderColorHover}: ${textSecondary}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-positive-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-warning-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -225,38 +257,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -278,12 +310,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -295,38 +327,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -348,12 +380,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -365,38 +397,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -418,12 +450,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -435,38 +467,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -488,12 +520,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -505,38 +537,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -558,20 +590,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -584,12 +616,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -608,12 +640,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -631,12 +663,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/plasma-new-hope/src/examples/components/TimePicker/TimePicker.config.ts b/packages/plasma-new-hope/src/examples/components/TimePicker/TimePicker.config.ts index 285b4355d31..b87fe0fcca8 100644 --- a/packages/plasma-new-hope/src/examples/components/TimePicker/TimePicker.config.ts +++ b/packages/plasma-new-hope/src/examples/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { timePickerTokens as tokens } from '../../../components/TimePicker'; @@ -12,45 +35,45 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; - ${tokens.labelColor}: var(--text-primary); + ${tokens.labelColor}: ${textPrimary}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); + ${tokens.timePickerShadow}: ${shadowDownSoftS}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; ${tokens.disabledOpacity}: 0.4; `, @@ -67,12 +90,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -84,12 +107,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -107,35 +130,35 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.5rem; @@ -151,12 +174,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -168,12 +191,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -191,35 +214,35 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -235,12 +258,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -252,12 +275,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -275,35 +298,35 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.813rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -319,12 +342,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -336,12 +359,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -359,35 +382,35 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -458,13 +481,13 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/TimePickerGrid/TimePickerGrid.config.ts b/packages/plasma-new-hope/src/examples/components/TimePickerGrid/TimePickerGrid.config.ts index 0c16ccbdd06..8ef5c3b2044 100644 --- a/packages/plasma-new-hope/src/examples/components/TimePickerGrid/TimePickerGrid.config.ts +++ b/packages/plasma-new-hope/src/examples/components/TimePickerGrid/TimePickerGrid.config.ts @@ -1,3 +1,13 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { timePickerGridTokens as tokens } from '../../../components/TimePickerGrid'; @@ -10,12 +20,12 @@ export const config = { variations: { view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; ${tokens.disabledOpacity}: 0.4; `, @@ -25,12 +35,12 @@ export const config = { ${tokens.timePickerGridWidth}: 15rem; ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; @@ -43,12 +53,12 @@ export const config = { ${tokens.timePickerGridWidth}: 15rem; ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; @@ -61,12 +71,12 @@ export const config = { ${tokens.timePickerGridWidth}: 15rem; ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; @@ -79,12 +89,12 @@ export const config = { ${tokens.timePickerGridWidth}: 15rem; ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; diff --git a/packages/plasma-new-hope/src/examples/components/Toast/Toast.config.ts b/packages/plasma-new-hope/src/examples/components/Toast/Toast.config.ts index 3542e7f837f..105bfba5be0 100644 --- a/packages/plasma-new-hope/src/examples/components/Toast/Toast.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Toast/Toast.config.ts @@ -1,3 +1,17 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { toastTokens } from '../../../components/Toast'; @@ -11,49 +25,49 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-positive); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textPositive}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-negative); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textNegative}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary); + ${toastTokens.closeIconColor}: ${onDarkTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary); + ${toastTokens.closeIconColor}: ${onLightTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextSecondary}; `, }, size: { @@ -61,12 +75,12 @@ export const config = { ${toastTokens.borderRadius}: 0.75rem; ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/plasma-new-hope/src/examples/components/ToastNew/Toast.config.ts b/packages/plasma-new-hope/src/examples/components/ToastNew/Toast.config.ts index 8c05a8df220..17b025e5c3c 100644 --- a/packages/plasma-new-hope/src/examples/components/ToastNew/Toast.config.ts +++ b/packages/plasma-new-hope/src/examples/components/ToastNew/Toast.config.ts @@ -1,3 +1,9 @@ +import { + bodyXS, + surfaceSolidCardBrightness, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { toastNewTokens as toastTokens } from '../../../components/Toast/ToastNew'; @@ -10,11 +16,11 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, }, size: { @@ -27,12 +33,12 @@ export const config = { ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; `, }, pilled: { diff --git a/packages/plasma-new-hope/src/examples/components/Toolbar/Toolbar.config.ts b/packages/plasma-new-hope/src/examples/components/Toolbar/Toolbar.config.ts index a0724b4de21..1339f90ba91 100644 --- a/packages/plasma-new-hope/src/examples/components/Toolbar/Toolbar.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { toolbarTokens } from '../../../components/Toolbar'; @@ -10,10 +15,10 @@ export const config = { variations: { view: { default: css` - ${toolbarTokens.boxShadow}: var(--shadow-down-soft-s); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.boxShadow}: ${shadowDownSoftS}; + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/plasma-new-hope/src/examples/components/Tooltip/Tooltip.config.ts b/packages/plasma-new-hope/src/examples/components/Tooltip/Tooltip.config.ts index ce51da035d5..c6af1079e9a 100644 --- a/packages/plasma-new-hope/src/examples/components/Tooltip/Tooltip.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,10 @@ +import { + bodyS, + bodyXS, + shadowDownHardS, + surfaceSolidCardBrightness, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tooltipTokens } from '../../../components/Tooltip'; @@ -18,12 +25,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -32,7 +39,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -43,12 +50,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -57,14 +64,14 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); - ${tooltipTokens.boxShadow}: var(--shadow-down-hard-s); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; + ${tooltipTokens.boxShadow}: ${shadowDownHardS}; + ${tooltipTokens.color}: ${textPrimary}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/Tree/Tree.config.ts b/packages/plasma-new-hope/src/examples/components/Tree/Tree.config.ts index adad86fb79d..46ff3a7c64b 100644 --- a/packages/plasma-new-hope/src/examples/components/Tree/Tree.config.ts +++ b/packages/plasma-new-hope/src/examples/components/Tree/Tree.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { treeTokens as tokens } from '../../../components/Tree/Tree.tokens'; @@ -10,25 +26,25 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -56,12 +72,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.itemHeight}: 3.5rem; @@ -87,12 +103,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.itemHeight}: 3rem; @@ -118,12 +134,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -149,12 +165,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.itemHeight}: 2rem; @@ -180,12 +196,12 @@ export const config = { ${tokens.checkboxInnerSize}: 0.875rem; ${tokens.checkboxBorderRadius}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/_ai/Answer/Answer.config.ts b/packages/plasma-new-hope/src/examples/components/_ai/Answer/Answer.config.ts index 08a5fe10f95..dbeb887625a 100644 --- a/packages/plasma-new-hope/src/examples/components/_ai/Answer/Answer.config.ts +++ b/packages/plasma-new-hope/src/examples/components/_ai/Answer/Answer.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h4, + h5, + surfaceSolidDefault, + surfaceTransparentNegative, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tokens } from '../../../../components/_ai/Answer/Answer.tokens'; @@ -10,13 +26,13 @@ export const config = { variations: { view: { default: css` - ${tokens.titleColor}: var(--text-primary); - ${tokens.textContentColor}: var(--text-primary); - ${tokens.loadingTitleColor}: var(--text-primary); - ${tokens.spinnerColor}: var(--surface-solid-default); - ${tokens.errorContainerBackgroundColor}: var(--surface-transparent-negative); - ${tokens.errorTitleColor}: var(--text-primary); - ${tokens.errorTextContentColor}: var(--text-primary); + ${tokens.titleColor}: ${textPrimary}; + ${tokens.textContentColor}: ${textPrimary}; + ${tokens.loadingTitleColor}: ${textPrimary}; + ${tokens.spinnerColor}: ${surfaceSolidDefault}; + ${tokens.errorContainerBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.errorTitleColor}: ${textPrimary}; + ${tokens.errorTextContentColor}: ${textPrimary}; `, }, size: { @@ -24,26 +40,26 @@ export const config = { ${tokens.titleContentGap}: 1.875rem; ${tokens.contentFooterGap}: 1.25rem; - ${tokens.titleFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-h3-line-height); - - ${tokens.textContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textContentFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textContentFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textContentLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.loadingTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.loadingTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.loadingTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.loadingTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.loadingTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.loadingTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.titleFontFamily}: ${h3.fontFamily}; + ${tokens.titleFontSize}: ${h3.fontSize}; + ${tokens.titleFontStyle}: ${h3.fontStyle}; + ${tokens.titleFontWeight}: ${h3.fontWeight}; + ${tokens.titleLetterSpacing}: ${h3.letterSpacing}; + ${tokens.titleLineHeight}: ${h3.lineHeight}; + + ${tokens.textContentFontFamily}: ${bodyL.fontFamily}; + ${tokens.textContentFontSize}: ${bodyL.fontSize}; + ${tokens.textContentFontStyle}: ${bodyL.fontStyle}; + ${tokens.textContentFontWeight}: ${bodyL.fontWeight}; + ${tokens.textContentLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textContentLineHeight}: ${bodyL.lineHeight}; + + ${tokens.loadingTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.loadingTitleFontSize}: ${bodyL.fontSize}; + ${tokens.loadingTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.loadingTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.loadingTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.loadingTitleLineHeight}: ${bodyL.lineHeight}; ${tokens.spinnerSize}: 1.5rem; @@ -51,44 +67,44 @@ export const config = { ${tokens.errorContainerPadding}: 1.5rem 1.875rem; ${tokens.errorContainerGap}: 0.25rem; - ${tokens.errorTitleFontFamily}: var(--plasma-typo-body-l-bold-font-family); - ${tokens.errorTitleFontSize}: var(--plasma-typo-body-l-bold-font-size); - ${tokens.errorTitleFontStyle}: var(--plasma-typo-body-l-bold-font-style); - ${tokens.errorTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.errorTitleLetterSpacing}: var(--plasma-typo-body-l-bold-letter-spacing); - ${tokens.errorTitleLineHeight}: var(--plasma-typo-body-l-bold-line-height); - - ${tokens.errorTextContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.errorTextContentFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.errorTextContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.errorTextContentFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.errorTextContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.errorTextContentLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.errorTitleFontFamily}: ${bodyLBold.fontFamily}; + ${tokens.errorTitleFontSize}: ${bodyLBold.fontSize}; + ${tokens.errorTitleFontStyle}: ${bodyLBold.fontStyle}; + ${tokens.errorTitleFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.errorTitleLetterSpacing}: ${bodyLBold.letterSpacing}; + ${tokens.errorTitleLineHeight}: ${bodyLBold.lineHeight}; + + ${tokens.errorTextContentFontFamily}: ${bodyL.fontFamily}; + ${tokens.errorTextContentFontSize}: ${bodyL.fontSize}; + ${tokens.errorTextContentFontStyle}: ${bodyL.fontStyle}; + ${tokens.errorTextContentFontWeight}: ${bodyL.fontWeight}; + ${tokens.errorTextContentLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.errorTextContentLineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.titleContentGap}: 1.625rem; ${tokens.contentFooterGap}: 1rem; - ${tokens.titleFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-h3-line-height); - - ${tokens.textContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textContentFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textContentFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textContentLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.loadingTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.loadingTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.loadingTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.loadingTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.loadingTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.loadingTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.titleFontFamily}: ${h3.fontFamily}; + ${tokens.titleFontSize}: ${h3.fontSize}; + ${tokens.titleFontStyle}: ${h3.fontStyle}; + ${tokens.titleFontWeight}: ${h3.fontWeight}; + ${tokens.titleLetterSpacing}: ${h3.letterSpacing}; + ${tokens.titleLineHeight}: ${h3.lineHeight}; + + ${tokens.textContentFontFamily}: ${bodyL.fontFamily}; + ${tokens.textContentFontSize}: ${bodyL.fontSize}; + ${tokens.textContentFontStyle}: ${bodyL.fontStyle}; + ${tokens.textContentFontWeight}: ${bodyL.fontWeight}; + ${tokens.textContentLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textContentLineHeight}: ${bodyL.lineHeight}; + + ${tokens.loadingTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.loadingTitleFontSize}: ${bodyL.fontSize}; + ${tokens.loadingTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.loadingTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.loadingTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.loadingTitleLineHeight}: ${bodyL.lineHeight}; ${tokens.spinnerSize}: 1.5rem; @@ -96,44 +112,44 @@ export const config = { ${tokens.errorContainerPadding}: 1.5rem 1.875rem; ${tokens.errorContainerGap}: 0.25rem; - ${tokens.errorTitleFontFamily}: var(--plasma-typo-body-l-bold-font-family); - ${tokens.errorTitleFontSize}: var(--plasma-typo-body-l-bold-font-size); - ${tokens.errorTitleFontStyle}: var(--plasma-typo-body-l-bold-font-style); - ${tokens.errorTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.errorTitleLetterSpacing}: var(--plasma-typo-body-l-bold-letter-spacing); - ${tokens.errorTitleLineHeight}: var(--plasma-typo-body-l-bold-line-height); - - ${tokens.errorTextContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.errorTextContentFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.errorTextContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.errorTextContentFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.errorTextContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.errorTextContentLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.errorTitleFontFamily}: ${bodyLBold.fontFamily}; + ${tokens.errorTitleFontSize}: ${bodyLBold.fontSize}; + ${tokens.errorTitleFontStyle}: ${bodyLBold.fontStyle}; + ${tokens.errorTitleFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.errorTitleLetterSpacing}: ${bodyLBold.letterSpacing}; + ${tokens.errorTitleLineHeight}: ${bodyLBold.lineHeight}; + + ${tokens.errorTextContentFontFamily}: ${bodyL.fontFamily}; + ${tokens.errorTextContentFontSize}: ${bodyL.fontSize}; + ${tokens.errorTextContentFontStyle}: ${bodyL.fontStyle}; + ${tokens.errorTextContentFontWeight}: ${bodyL.fontWeight}; + ${tokens.errorTextContentLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.errorTextContentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.titleContentGap}: 1.375rem; ${tokens.contentFooterGap}: 0.75rem; - ${tokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-h4-line-height); - - ${tokens.textContentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textContentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textContentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textContentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textContentLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.loadingTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.loadingTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.loadingTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.loadingTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.loadingTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.loadingTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.titleFontFamily}: ${h4.fontFamily}; + ${tokens.titleFontSize}: ${h4.fontSize}; + ${tokens.titleFontStyle}: ${h4.fontStyle}; + ${tokens.titleFontWeight}: ${h4.fontWeight}; + ${tokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${tokens.titleLineHeight}: ${h4.lineHeight}; + + ${tokens.textContentFontFamily}: ${bodyM.fontFamily}; + ${tokens.textContentFontSize}: ${bodyM.fontSize}; + ${tokens.textContentFontStyle}: ${bodyM.fontStyle}; + ${tokens.textContentFontWeight}: ${bodyM.fontWeight}; + ${tokens.textContentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textContentLineHeight}: ${bodyM.lineHeight}; + + ${tokens.loadingTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.loadingTitleFontSize}: ${bodyM.fontSize}; + ${tokens.loadingTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.loadingTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.loadingTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.loadingTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.spinnerSize}: 1.5rem; @@ -141,44 +157,44 @@ export const config = { ${tokens.errorContainerPadding}: 1.25rem 1.5rem; ${tokens.errorContainerGap}: 0.125rem; - ${tokens.errorTitleFontFamily}: var(--plasma-typo-body-m-bold-font-family); - ${tokens.errorTitleFontSize}: var(--plasma-typo-body-m-bold-font-size); - ${tokens.errorTitleFontStyle}: var(--plasma-typo-body-m-bold-font-style); - ${tokens.errorTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.errorTitleLetterSpacing}: var(--plasma-typo-body-m-bold-letter-spacing); - ${tokens.errorTitleLineHeight}: var(--plasma-typo-body-m-bold-line-height); - - ${tokens.errorTextContentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.errorTextContentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.errorTextContentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.errorTextContentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.errorTextContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.errorTextContentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.errorTitleFontFamily}: ${bodyMBold.fontFamily}; + ${tokens.errorTitleFontSize}: ${bodyMBold.fontSize}; + ${tokens.errorTitleFontStyle}: ${bodyMBold.fontStyle}; + ${tokens.errorTitleFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.errorTitleLetterSpacing}: ${bodyMBold.letterSpacing}; + ${tokens.errorTitleLineHeight}: ${bodyMBold.lineHeight}; + + ${tokens.errorTextContentFontFamily}: ${bodyM.fontFamily}; + ${tokens.errorTextContentFontSize}: ${bodyM.fontSize}; + ${tokens.errorTextContentFontStyle}: ${bodyM.fontStyle}; + ${tokens.errorTextContentFontWeight}: ${bodyM.fontWeight}; + ${tokens.errorTextContentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.errorTextContentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.titleContentGap}: 1.25rem; ${tokens.contentFooterGap}: 0.625rem; - ${tokens.titleFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-h5-line-height); - - ${tokens.textContentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textContentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textContentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textContentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textContentLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.loadingTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.loadingTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.loadingTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.loadingTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.loadingTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.loadingTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.titleFontFamily}: ${h5.fontFamily}; + ${tokens.titleFontSize}: ${h5.fontSize}; + ${tokens.titleFontStyle}: ${h5.fontStyle}; + ${tokens.titleFontWeight}: ${h5.fontWeight}; + ${tokens.titleLetterSpacing}: ${h5.letterSpacing}; + ${tokens.titleLineHeight}: ${h5.lineHeight}; + + ${tokens.textContentFontFamily}: ${bodyS.fontFamily}; + ${tokens.textContentFontSize}: ${bodyS.fontSize}; + ${tokens.textContentFontStyle}: ${bodyS.fontStyle}; + ${tokens.textContentFontWeight}: ${bodyS.fontWeight}; + ${tokens.textContentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textContentLineHeight}: ${bodyS.lineHeight}; + + ${tokens.loadingTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.loadingTitleFontSize}: ${bodyS.fontSize}; + ${tokens.loadingTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.loadingTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.loadingTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.loadingTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.spinnerSize}: 1.5rem; @@ -186,44 +202,44 @@ export const config = { ${tokens.errorContainerPadding}: 1rem 1.25rem; ${tokens.errorContainerGap}: 0.125rem; - ${tokens.errorTitleFontFamily}: var(--plasma-typo-body-s-bold-font-family); - ${tokens.errorTitleFontSize}: var(--plasma-typo-body-s-bold-font-size); - ${tokens.errorTitleFontStyle}: var(--plasma-typo-body-s-bold-font-style); - ${tokens.errorTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.errorTitleLetterSpacing}: var(--plasma-typo-body-s-bold-letter-spacing); - ${tokens.errorTitleLineHeight}: var(--plasma-typo-body-s-bold-line-height); - - ${tokens.errorTextContentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.errorTextContentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.errorTextContentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.errorTextContentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.errorTextContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.errorTextContentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.errorTitleFontFamily}: ${bodySBold.fontFamily}; + ${tokens.errorTitleFontSize}: ${bodySBold.fontSize}; + ${tokens.errorTitleFontStyle}: ${bodySBold.fontStyle}; + ${tokens.errorTitleFontWeight}: ${bodySBold.fontWeight}; + ${tokens.errorTitleLetterSpacing}: ${bodySBold.letterSpacing}; + ${tokens.errorTitleLineHeight}: ${bodySBold.lineHeight}; + + ${tokens.errorTextContentFontFamily}: ${bodyS.fontFamily}; + ${tokens.errorTextContentFontSize}: ${bodyS.fontSize}; + ${tokens.errorTextContentFontStyle}: ${bodyS.fontStyle}; + ${tokens.errorTextContentFontWeight}: ${bodyS.fontWeight}; + ${tokens.errorTextContentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.errorTextContentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.titleContentGap}: 1.125rem; ${tokens.contentFooterGap}: 0.5rem; - ${tokens.titleFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-h5-line-height); - - ${tokens.textContentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textContentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textContentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textContentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textContentLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.loadingTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.loadingTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.loadingTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.loadingTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.loadingTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.loadingTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleFontFamily}: ${h5.fontFamily}; + ${tokens.titleFontSize}: ${h5.fontSize}; + ${tokens.titleFontStyle}: ${h5.fontStyle}; + ${tokens.titleFontWeight}: ${h5.fontWeight}; + ${tokens.titleLetterSpacing}: ${h5.letterSpacing}; + ${tokens.titleLineHeight}: ${h5.lineHeight}; + + ${tokens.textContentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textContentFontSize}: ${bodyXS.fontSize}; + ${tokens.textContentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textContentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textContentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textContentLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.loadingTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.loadingTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.loadingTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.loadingTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.loadingTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.loadingTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.spinnerSize}: 1rem; @@ -231,19 +247,19 @@ export const config = { ${tokens.errorContainerPadding}: 0.75rem 1rem; ${tokens.errorContainerGap}: 0.125rem; - ${tokens.errorTitleFontFamily}: var(--plasma-typo-body-xs-bold-font-family); - ${tokens.errorTitleFontSize}: var(--plasma-typo-body-xs-bold-font-size); - ${tokens.errorTitleFontStyle}: var(--plasma-typo-body-xs-bold-font-style); - ${tokens.errorTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.errorTitleLetterSpacing}: var(--plasma-typo-body-xs-bold-letter-spacing); - ${tokens.errorTitleLineHeight}: var(--plasma-typo-body-xs-bold-line-height); - - ${tokens.errorTextContentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.errorTextContentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.errorTextContentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.errorTextContentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.errorTextContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.errorTextContentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.errorTitleFontFamily}: ${bodyXSBold.fontFamily}; + ${tokens.errorTitleFontSize}: ${bodyXSBold.fontSize}; + ${tokens.errorTitleFontStyle}: ${bodyXSBold.fontStyle}; + ${tokens.errorTitleFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.errorTitleLetterSpacing}: ${bodyXSBold.letterSpacing}; + ${tokens.errorTitleLineHeight}: ${bodyXSBold.lineHeight}; + + ${tokens.errorTextContentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.errorTextContentFontSize}: ${bodyXS.fontSize}; + ${tokens.errorTextContentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.errorTextContentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.errorTextContentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.errorTextContentLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/_ai/Container/Container.config.ts b/packages/plasma-new-hope/src/examples/components/_ai/Container/Container.config.ts index 29fe7e193cc..68f5dec829b 100644 --- a/packages/plasma-new-hope/src/examples/components/_ai/Container/Container.config.ts +++ b/packages/plasma-new-hope/src/examples/components/_ai/Container/Container.config.ts @@ -1,3 +1,11 @@ +import { + bodyXS, + surfaceSolidCard, + surfaceSolidPrimary, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tokens } from '../../../../components/_ai/Container/Container.tokens'; @@ -10,18 +18,18 @@ export const config = { variations: { view: { default: css` - ${tokens.backgroundColor}: var(--surface-solid-card); - ${tokens.contentScrollTrackColor}: var(--surface-transparent-primary); - ${tokens.contentScrollThumbColor}: var(--surface-transparent-tertiary); + ${tokens.backgroundColor}: ${surfaceSolidCard}; + ${tokens.contentScrollTrackColor}: ${surfaceTransparentPrimary}; + ${tokens.contentScrollThumbColor}: ${surfaceTransparentTertiary}; - ${tokens.footerCaptionColor}: var(--text-secondary); + ${tokens.footerCaptionColor}: ${textSecondary}; `, secondary: css` - ${tokens.backgroundColor}: var(--surface-solid-primary); - ${tokens.contentScrollTrackColor}: var(--surface-transparent-primary); - ${tokens.contentScrollThumbColor}: var(--surface-transparent-tertiary); + ${tokens.backgroundColor}: ${surfaceSolidPrimary}; + ${tokens.contentScrollTrackColor}: ${surfaceTransparentPrimary}; + ${tokens.contentScrollThumbColor}: ${surfaceTransparentTertiary}; - ${tokens.footerCaptionColor}: var(--text-secondary); + ${tokens.footerCaptionColor}: ${textSecondary}; `, }, size: { @@ -38,12 +46,12 @@ export const config = { ${tokens.footerCaptionMarginTop}: 0.5rem; ${tokens.footerBlur}: 1rem; - ${tokens.footerCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.footerCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.footerCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.footerCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.footerCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.footerCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.footerCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.footerCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.footerCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.footerCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.footerCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.footerCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.contentPadding}: 1.75rem; @@ -58,12 +66,12 @@ export const config = { ${tokens.footerCaptionMarginTop}: 0.5rem; ${tokens.footerBlur}: 1rem; - ${tokens.footerCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.footerCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.footerCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.footerCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.footerCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.footerCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.footerCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.footerCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.footerCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.footerCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.footerCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.footerCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.contentPadding}: 1.5rem; @@ -78,12 +86,12 @@ export const config = { ${tokens.footerCaptionMarginTop}: 0.375rem; ${tokens.footerBlur}: 0.625rem; - ${tokens.footerCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.footerCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.footerCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.footerCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.footerCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.footerCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.footerCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.footerCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.footerCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.footerCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.footerCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.footerCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.contentPadding}: 1.25rem; @@ -98,12 +106,12 @@ export const config = { ${tokens.footerCaptionMarginTop}: 0.375rem; ${tokens.footerBlur}: 0.625rem; - ${tokens.footerCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.footerCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.footerCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.footerCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.footerCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.footerCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.footerCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.footerCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.footerCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.footerCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.footerCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.footerCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.contentPadding}: 1rem; @@ -118,12 +126,12 @@ export const config = { ${tokens.footerCaptionMarginTop}: 0.25rem; ${tokens.footerBlur}: 0.625rem; - ${tokens.footerCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.footerCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.footerCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.footerCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.footerCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.footerCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.footerCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.footerCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.footerCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.footerCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.footerCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.footerCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/_ai/Header/Header.config.ts b/packages/plasma-new-hope/src/examples/components/_ai/Header/Header.config.ts index 9f6d62dc6ba..09a8ef6d9dc 100644 --- a/packages/plasma-new-hope/src/examples/components/_ai/Header/Header.config.ts +++ b/packages/plasma-new-hope/src/examples/components/_ai/Header/Header.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h2Bold, + h3Bold, + h4Bold, + h5Bold, + surfaceSolidCard, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { headerTokens as tokens } from '../../../../components/_ai/Header'; @@ -10,22 +28,22 @@ export const config = { variations: { view: { default: css` - ${tokens.backgroundColor}: var(--surface-solid-card); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.titleColor}: var(--text-primary); - ${tokens.descriptionColor}: var(--text-primary); + ${tokens.backgroundColor}: ${surfaceSolidCard}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.titleColor}: ${textPrimary}; + ${tokens.descriptionColor}: ${textPrimary}; `, secondary: css` - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.titleColor}: var(--text-primary); - ${tokens.descriptionColor}: var(--text-primary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.titleColor}: ${textPrimary}; + ${tokens.descriptionColor}: ${textPrimary}; `, clear: css` ${tokens.backgroundColor}: transparent; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.titleColor}: var(--text-primary); - ${tokens.descriptionColor}: var(--text-primary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.titleColor}: ${textPrimary}; + ${tokens.descriptionColor}: ${textPrimary}; `, }, size: { @@ -36,19 +54,19 @@ export const config = { ${tokens.contentGap}: 0.5rem; ${tokens.contentPadding}: 1.063rem 1.125rem; - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-bold-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-bold-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-bold-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-bold-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-bold-line-height); - - ${tokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.titleFontFamily}: ${bodyLBold.fontFamily}; + ${tokens.titleFontSize}: ${bodyLBold.fontSize}; + ${tokens.titleFontStyle}: ${bodyLBold.fontStyle}; + ${tokens.titleFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyLBold.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyLBold.lineHeight}; + + ${tokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${tokens.descriptionFontSize}: ${bodyM.fontSize}; + ${tokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${tokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${tokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, l: css` ${tokens.padding}: 0.5rem 0; @@ -57,19 +75,19 @@ export const config = { ${tokens.contentGap}: 0.5rem; ${tokens.contentPadding}: 0.813rem 0.75rem; - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-bold-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-bold-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-bold-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-bold-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-bold-line-height); - - ${tokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.titleFontFamily}: ${bodyLBold.fontFamily}; + ${tokens.titleFontSize}: ${bodyLBold.fontSize}; + ${tokens.titleFontStyle}: ${bodyLBold.fontStyle}; + ${tokens.titleFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyLBold.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyLBold.lineHeight}; + + ${tokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${tokens.descriptionFontSize}: ${bodyM.fontSize}; + ${tokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${tokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${tokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, m: css` ${tokens.padding}: 0.5rem 0; @@ -78,19 +96,19 @@ export const config = { ${tokens.contentGap}: 0.5rem; ${tokens.contentPadding}: 0.625rem 0.5rem; - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-bold-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-bold-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-bold-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-bold-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-bold-line-height); - - ${tokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.titleFontFamily}: ${bodyMBold.fontFamily}; + ${tokens.titleFontSize}: ${bodyMBold.fontSize}; + ${tokens.titleFontStyle}: ${bodyMBold.fontStyle}; + ${tokens.titleFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyMBold.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyMBold.lineHeight}; + + ${tokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${tokens.descriptionFontSize}: ${bodyS.fontSize}; + ${tokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${tokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${tokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, s: css` ${tokens.padding}: 0.375rem 0; @@ -99,19 +117,19 @@ export const config = { ${tokens.contentGap}: 0.25rem; ${tokens.contentPadding}: 0.438rem 0.625rem; - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-bold-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-bold-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-bold-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-bold-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-bold-line-height); - - ${tokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleFontFamily}: ${bodySBold.fontFamily}; + ${tokens.titleFontSize}: ${bodySBold.fontSize}; + ${tokens.titleFontStyle}: ${bodySBold.fontStyle}; + ${tokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodySBold.letterSpacing}; + ${tokens.titleLineHeight}: ${bodySBold.lineHeight}; + + ${tokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${tokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.padding}: 0.25rem 0; @@ -120,19 +138,19 @@ export const config = { ${tokens.contentGap}: 0.25rem; ${tokens.contentPadding}: 0.563rem 0.625rem; - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-bold-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-bold-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-bold-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-bold-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-bold-line-height); - - ${tokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleFontFamily}: ${bodyXSBold.fontFamily}; + ${tokens.titleFontSize}: ${bodyXSBold.fontSize}; + ${tokens.titleFontStyle}: ${bodyXSBold.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXSBold.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXSBold.lineHeight}; + + ${tokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${tokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, h2: css` ${tokens.padding}: 0.5rem 0; @@ -141,19 +159,19 @@ export const config = { ${tokens.contentGap}: 0.5rem; ${tokens.contentPadding}: 0.625rem 1.125rem; - ${tokens.titleFontFamily}: var(--plasma-typo-h2-bold-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-h2-bold-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-h2-bold-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-h2-bold-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-h2-bold-line-height); - - ${tokens.descriptionFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.descriptionFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.descriptionFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.descriptionFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.descriptionLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.descriptionLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.titleFontFamily}: ${h2Bold.fontFamily}; + ${tokens.titleFontSize}: ${h2Bold.fontSize}; + ${tokens.titleFontStyle}: ${h2Bold.fontStyle}; + ${tokens.titleFontWeight}: ${h2Bold.fontWeight}; + ${tokens.titleLetterSpacing}: ${h2Bold.letterSpacing}; + ${tokens.titleLineHeight}: ${h2Bold.lineHeight}; + + ${tokens.descriptionFontFamily}: ${bodyL.fontFamily}; + ${tokens.descriptionFontSize}: ${bodyL.fontSize}; + ${tokens.descriptionFontStyle}: ${bodyL.fontStyle}; + ${tokens.descriptionFontWeight}: ${bodyL.fontWeight}; + ${tokens.descriptionLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.descriptionLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${tokens.padding}: 0.5rem 0; @@ -162,19 +180,19 @@ export const config = { ${tokens.contentGap}: 0.5rem; ${tokens.contentPadding}: 0.563rem 0.75rem; - ${tokens.titleFontFamily}: var(--plasma-typo-h3-bold-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-h3-bold-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-h3-bold-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-h3-bold-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-h3-bold-line-height); - - ${tokens.descriptionFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.descriptionFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.descriptionFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.descriptionFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.descriptionLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.descriptionLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.titleFontFamily}: ${h3Bold.fontFamily}; + ${tokens.titleFontSize}: ${h3Bold.fontSize}; + ${tokens.titleFontStyle}: ${h3Bold.fontStyle}; + ${tokens.titleFontWeight}: ${h3Bold.fontWeight}; + ${tokens.titleLetterSpacing}: ${h3Bold.letterSpacing}; + ${tokens.titleLineHeight}: ${h3Bold.lineHeight}; + + ${tokens.descriptionFontFamily}: ${bodyL.fontFamily}; + ${tokens.descriptionFontSize}: ${bodyL.fontSize}; + ${tokens.descriptionFontStyle}: ${bodyL.fontStyle}; + ${tokens.descriptionFontWeight}: ${bodyL.fontWeight}; + ${tokens.descriptionLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.descriptionLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${tokens.padding}: 0.5rem 0; @@ -183,19 +201,19 @@ export const config = { ${tokens.contentGap}: 0.375rem; ${tokens.contentPadding}: 0.438rem 0.5rem; - ${tokens.titleFontFamily}: var(--plasma-typo-h4-bold-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-h4-bold-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-h4-bold-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-h4-bold-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-h4-bold-line-height); - - ${tokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.titleFontFamily}: ${h4Bold.fontFamily}; + ${tokens.titleFontSize}: ${h4Bold.fontSize}; + ${tokens.titleFontStyle}: ${h4Bold.fontStyle}; + ${tokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${tokens.titleLetterSpacing}: ${h4Bold.letterSpacing}; + ${tokens.titleLineHeight}: ${h4Bold.lineHeight}; + + ${tokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${tokens.descriptionFontSize}: ${bodyM.fontSize}; + ${tokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${tokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${tokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, h5: css` ${tokens.padding}: 0.375rem 0; @@ -204,19 +222,19 @@ export const config = { ${tokens.contentGap}: 0.25rem; ${tokens.contentPadding}: 0.25rem 0.625rem; - ${tokens.titleFontFamily}: var(--plasma-typo-h5-bold-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-h5-bold-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-h5-bold-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-h5-bold-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-h5-bold-line-height); - - ${tokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.titleFontFamily}: ${h5Bold.fontFamily}; + ${tokens.titleFontSize}: ${h5Bold.fontSize}; + ${tokens.titleFontStyle}: ${h5Bold.fontStyle}; + ${tokens.titleFontWeight}: ${h5Bold.fontWeight}; + ${tokens.titleLetterSpacing}: ${h5Bold.letterSpacing}; + ${tokens.titleLineHeight}: ${h5Bold.lineHeight}; + + ${tokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${tokens.descriptionFontSize}: ${bodyM.fontSize}; + ${tokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${tokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${tokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/_ai/Input/Input.config.ts b/packages/plasma-new-hope/src/examples/components/_ai/Input/Input.config.ts index c4e0b98b8b8..d7adb5c8f89 100644 --- a/packages/plasma-new-hope/src/examples/components/_ai/Input/Input.config.ts +++ b/packages/plasma-new-hope/src/examples/components/_ai/Input/Input.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { inputTokens as tokens } from 'src/components/_ai/Input'; @@ -9,25 +26,25 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.focusColor}: var(--surface-accent); - ${tokens.fileBackground}: var(--surface-solid-card-brightness); - ${tokens.fileEmbedIconButtonColor}: var(--text-primary); - ${tokens.fileEmbedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.fileEmbedIconButtonColorActive}: var(--text-primary-active); - ${tokens.fileCellTitleColor}: var(--text-primary); - ${tokens.fileCellSubtitleColor}: var(--text-secondary); - ${tokens.textareaColor}: var(--text-primary); - ${tokens.textareaPlaceholderColor}: var(--text-secondary); - ${tokens.textareaPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textareaCaretColor}: var(--surface-accent); - ${tokens.textareaScrollTrackColor}: var(--surface-transparent-primary); - ${tokens.textareaScrollThumbColor}: var(--surface-transparent-primary); - ${tokens.submitButtonColor}: var(--on-dark-text-primary); - ${tokens.submitButtonBackgroundColor}: var(--surface-accent); - ${tokens.submitButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.submitButtonBackgroundColorActive}: var(--surface-accent-active); - ${tokens.submitButtonLoadingBackgroundColor}: var(--surface-accent); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.fileBackground}: ${surfaceSolidCardBrightness}; + ${tokens.fileEmbedIconButtonColor}: ${textPrimary}; + ${tokens.fileEmbedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.fileEmbedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.fileCellTitleColor}: ${textPrimary}; + ${tokens.fileCellSubtitleColor}: ${textSecondary}; + ${tokens.textareaColor}: ${textPrimary}; + ${tokens.textareaPlaceholderColor}: ${textSecondary}; + ${tokens.textareaPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textareaCaretColor}: ${surfaceAccent}; + ${tokens.textareaScrollTrackColor}: ${surfaceTransparentPrimary}; + ${tokens.textareaScrollThumbColor}: ${surfaceTransparentPrimary}; + ${tokens.submitButtonColor}: ${onDarkTextPrimary}; + ${tokens.submitButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.submitButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.submitButtonBackgroundColorActive}: ${surfaceAccentActive}; + ${tokens.submitButtonLoadingBackgroundColor}: ${surfaceAccent}; ${tokens.submitButtonSpinnerColor}: inherit; `, }, @@ -53,18 +70,18 @@ export const config = { ${tokens.fileCellHeight}: 2.5rem; ${tokens.fileCellTextboxGap}: 0.125rem; ${tokens.fileCellGap}: 0.75rem; - ${tokens.fileCellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fileCellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fileCellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fileCellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fileCellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fileCellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.fileCellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fileCellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fileCellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fileCellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fileCellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fileCellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fileCellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.fileCellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.fileCellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.fileCellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.fileCellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fileCellTitleLineHeight}: ${bodyL.lineHeight}; + ${tokens.fileCellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.fileCellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.fileCellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.fileCellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.fileCellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fileCellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.fileThumbSize}: 2.5rem; ${tokens.fileThumbRadius}: 0.375rem; @@ -72,12 +89,12 @@ export const config = { ${tokens.textareaPaddingRight}: 1.25rem; ${tokens.textareaPaddingBottom}: 1.0625rem; ${tokens.textareaPaddingLeft}: 1.25rem; - ${tokens.textareaFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textareaFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textareaFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textareaFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textareaLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textareaLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textareaFontFamily}: ${bodyL.fontFamily}; + ${tokens.textareaFontSize}: ${bodyL.fontSize}; + ${tokens.textareaFontStyle}: ${bodyL.fontStyle}; + ${tokens.textareaFontWeight}: ${bodyL.fontWeight}; + ${tokens.textareaLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textareaLineHeight}: ${bodyL.lineHeight}; ${tokens.textareaScrollWidth}: 0.125rem; ${tokens.inputFieldPadding}: 0 1.125rem; @@ -109,18 +126,18 @@ export const config = { ${tokens.fileCellHeight}: 2.5rem; ${tokens.fileCellTextboxGap}: 0.125rem; ${tokens.fileCellGap}: 0.625rem; - ${tokens.fileCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fileCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fileCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fileCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fileCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fileCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.fileCellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fileCellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fileCellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fileCellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fileCellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fileCellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fileCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.fileCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.fileCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.fileCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.fileCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fileCellTitleLineHeight}: ${bodyM.lineHeight}; + ${tokens.fileCellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.fileCellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.fileCellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.fileCellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.fileCellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fileCellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.fileThumbSize}: 2.25rem; ${tokens.fileThumbRadius}: 0.375rem; @@ -128,12 +145,12 @@ export const config = { ${tokens.textareaPaddingRight}: 0.875rem; ${tokens.textareaPaddingBottom}: 0.8125rem; ${tokens.textareaPaddingLeft}: 0.875rem; - ${tokens.textareaFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textareaFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textareaFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textareaFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textareaLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textareaLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textareaFontFamily}: ${bodyL.fontFamily}; + ${tokens.textareaFontSize}: ${bodyL.fontSize}; + ${tokens.textareaFontStyle}: ${bodyL.fontStyle}; + ${tokens.textareaFontWeight}: ${bodyL.fontWeight}; + ${tokens.textareaLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textareaLineHeight}: ${bodyL.lineHeight}; ${tokens.textareaScrollWidth}: 0.125rem; ${tokens.inputFieldPadding}: 0 0.75rem; @@ -165,18 +182,18 @@ export const config = { ${tokens.fileCellHeight}: 2.125rem; ${tokens.fileCellTextboxGap}: 0.125rem; ${tokens.fileCellGap}: 0.5rem; - ${tokens.fileCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fileCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fileCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fileCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fileCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fileCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.fileCellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fileCellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fileCellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fileCellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fileCellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fileCellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fileCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.fileCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.fileCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.fileCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.fileCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fileCellTitleLineHeight}: ${bodyS.lineHeight}; + ${tokens.fileCellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.fileCellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.fileCellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.fileCellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.fileCellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fileCellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.fileThumbSize}: 2rem; ${tokens.fileThumbRadius}: 0.375rem; @@ -184,12 +201,12 @@ export const config = { ${tokens.textareaPaddingRight}: 0.625rem; ${tokens.textareaPaddingBottom}: 0.625rem; ${tokens.textareaPaddingLeft}: 0.625rem; - ${tokens.textareaFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textareaFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textareaFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textareaFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textareaLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textareaLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textareaFontFamily}: ${bodyM.fontFamily}; + ${tokens.textareaFontSize}: ${bodyM.fontSize}; + ${tokens.textareaFontStyle}: ${bodyM.fontStyle}; + ${tokens.textareaFontWeight}: ${bodyM.fontWeight}; + ${tokens.textareaLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textareaLineHeight}: ${bodyM.lineHeight}; ${tokens.textareaScrollWidth}: 0.125rem; ${tokens.inputFieldPadding}: 0 0.5rem; @@ -221,18 +238,18 @@ export const config = { ${tokens.fileCellHeight}: 1.875rem; ${tokens.fileCellTextboxGap}: 0.125rem; ${tokens.fileCellGap}: 0.375rem; - ${tokens.fileCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fileCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fileCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fileCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fileCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fileCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.fileCellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fileCellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fileCellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fileCellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fileCellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fileCellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fileCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.fileCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.fileCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.fileCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.fileCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fileCellTitleLineHeight}: ${bodyXS.lineHeight}; + ${tokens.fileCellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.fileCellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.fileCellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.fileCellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.fileCellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fileCellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.fileThumbSize}: 1.75rem; ${tokens.fileThumbRadius}: 0.25rem; @@ -240,12 +257,12 @@ export const config = { ${tokens.textareaPaddingRight}: 0.625rem; ${tokens.textareaPaddingBottom}: 0.4375rem; ${tokens.textareaPaddingLeft}: 0.625rem; - ${tokens.textareaFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textareaFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textareaFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textareaFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textareaLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textareaLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textareaFontFamily}: ${bodyS.fontFamily}; + ${tokens.textareaFontSize}: ${bodyS.fontSize}; + ${tokens.textareaFontStyle}: ${bodyS.fontStyle}; + ${tokens.textareaFontWeight}: ${bodyS.fontWeight}; + ${tokens.textareaLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textareaLineHeight}: ${bodyS.lineHeight}; ${tokens.textareaScrollWidth}: 0.125rem; ${tokens.inputFieldPadding}: 0 0.625rem; @@ -277,18 +294,18 @@ export const config = { ${tokens.fileCellHeight}: 1.875rem; ${tokens.fileCellTextboxGap}: 0.125rem; ${tokens.fileCellGap}: 0.375rem; - ${tokens.fileCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fileCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fileCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fileCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fileCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fileCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.fileCellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fileCellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fileCellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fileCellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fileCellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fileCellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fileCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.fileCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.fileCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.fileCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.fileCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fileCellTitleLineHeight}: ${bodyXS.lineHeight}; + ${tokens.fileCellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.fileCellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.fileCellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.fileCellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.fileCellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fileCellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.fileThumbSize}: 1.75rem; ${tokens.fileThumbRadius}: 0.25rem; @@ -296,12 +313,12 @@ export const config = { ${tokens.textareaPaddingRight}: 0.5625rem; ${tokens.textareaPaddingBottom}: 0.5625rem; ${tokens.textareaPaddingLeft}: 0.5625rem; - ${tokens.textareaFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textareaFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textareaFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textareaFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textareaLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textareaLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textareaFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textareaFontSize}: ${bodyXS.fontSize}; + ${tokens.textareaFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textareaFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textareaLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textareaLineHeight}: ${bodyXS.lineHeight}; ${tokens.textareaScrollWidth}: 0.125rem; ${tokens.inputFieldPadding}: 0 0.625rem; diff --git a/packages/plasma-new-hope/src/examples/components/_ai/UserMessage/UserMessage.config.ts b/packages/plasma-new-hope/src/examples/components/_ai/UserMessage/UserMessage.config.ts index 1a410f11493..888ad2f0287 100644 --- a/packages/plasma-new-hope/src/examples/components/_ai/UserMessage/UserMessage.config.ts +++ b/packages/plasma-new-hope/src/examples/components/_ai/UserMessage/UserMessage.config.ts @@ -1,3 +1,25 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceSolidCard, + surfaceSolidSecondary, + surfaceSolidTertiary, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { userMessageTokens as tokens } from '../../../../components/_ai/UserMessage'; @@ -11,106 +33,106 @@ export const config = { variations: { view: { default: css` - ${tokens.backgroundColor}: var(--surface-solid-card); - ${tokens.backgroundColorEditing}: var(--surface-solid-tertiary); + ${tokens.backgroundColor}: ${surfaceSolidCard}; + ${tokens.backgroundColorEditing}: ${surfaceSolidTertiary}; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textColor}: var(--text-primary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textColor}: ${textPrimary}; - ${tokens.fileItemTitleColor}: var(--text-primary); - ${tokens.fileItemSubtitleColor}: var(--text-secondary); + ${tokens.fileItemTitleColor}: ${textPrimary}; + ${tokens.fileItemSubtitleColor}: ${textSecondary}; - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; `, secondary: css` - ${tokens.backgroundColor}: var(--surface-solid-secondary); - ${tokens.backgroundColorEditing}: var(--surface-solid-tertiary); + ${tokens.backgroundColor}: ${surfaceSolidSecondary}; + ${tokens.backgroundColorEditing}: ${surfaceSolidTertiary}; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textColor}: var(--text-primary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textColor}: ${textPrimary}; - ${tokens.fileItemTitleColor}: var(--text-primary); - ${tokens.fileItemSubtitleColor}: var(--text-secondary); + ${tokens.fileItemTitleColor}: ${textPrimary}; + ${tokens.fileItemSubtitleColor}: ${textSecondary}; - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; `, accent: css` - ${tokens.backgroundColor}: var(--surface-transparent-accent); - ${tokens.backgroundColorEditing}: var(--surface-solid-tertiary); + ${tokens.backgroundColor}: ${surfaceTransparentAccent}; + ${tokens.backgroundColorEditing}: ${surfaceSolidTertiary}; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textColor}: var(--text-primary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textColor}: ${textPrimary}; - ${tokens.fileItemTitleColor}: var(--text-primary); - ${tokens.fileItemSubtitleColor}: var(--text-secondary); + ${tokens.fileItemTitleColor}: ${textPrimary}; + ${tokens.fileItemSubtitleColor}: ${textSecondary}; - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; `, positive: css` - ${tokens.backgroundColor}: var(--surface-transparent-positive); - ${tokens.backgroundColorEditing}: var(--surface-solid-tertiary); + ${tokens.backgroundColor}: ${surfaceTransparentPositive}; + ${tokens.backgroundColorEditing}: ${surfaceSolidTertiary}; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textColor}: var(--text-primary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textColor}: ${textPrimary}; - ${tokens.fileItemTitleColor}: var(--text-primary); - ${tokens.fileItemSubtitleColor}: var(--text-secondary); + ${tokens.fileItemTitleColor}: ${textPrimary}; + ${tokens.fileItemSubtitleColor}: ${textSecondary}; - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; `, negative: css` - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorEditing}: var(--surface-solid-tertiary); + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorEditing}: ${surfaceSolidTertiary}; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textColor}: var(--text-primary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textColor}: ${textPrimary}; - ${tokens.fileItemTitleColor}: var(--text-primary); - ${tokens.fileItemSubtitleColor}: var(--text-secondary); + ${tokens.fileItemTitleColor}: ${textPrimary}; + ${tokens.fileItemSubtitleColor}: ${textSecondary}; - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; `, warning: css` - ${tokens.backgroundColor}: var(--surface-transparent-warning); - ${tokens.backgroundColorEditing}: var(--surface-solid-tertiary); + ${tokens.backgroundColor}: ${surfaceTransparentWarning}; + ${tokens.backgroundColorEditing}: ${surfaceSolidTertiary}; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textColor}: var(--text-primary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textColor}: ${textPrimary}; - ${tokens.fileItemTitleColor}: var(--text-primary); - ${tokens.fileItemSubtitleColor}: var(--text-secondary); + ${tokens.fileItemTitleColor}: ${textPrimary}; + ${tokens.fileItemSubtitleColor}: ${textSecondary}; - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; `, }, size: { @@ -125,12 +147,12 @@ export const config = { ${tokens.scrollbarWidth}: 0.188rem; ${tokens.scrollbarBorderWidth}: 0.063rem; - ${tokens.textFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFontSize}: ${bodyL.fontSize}; + ${tokens.textFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFontWeight}: ${bodyL.fontWeight}; + ${tokens.textLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textLineHeight}: ${bodyL.lineHeight}; ${tokens.actionsGap}: 0.5rem; ${tokens.actionsEditingGap}: 0.125rem; @@ -147,19 +169,19 @@ export const config = { ${tokens.fileItemGap}: 0.75rem; ${tokens.fileItemTextboxGap}: 0.125rem; - ${tokens.fileItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fileItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fileItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fileItemTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fileItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fileItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fileItemTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.fileItemTitleFontSize}: ${bodyL.fontSize}; + ${tokens.fileItemTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.fileItemTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.fileItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fileItemTitleLineHeight}: ${bodyL.lineHeight}; - ${tokens.fileItemSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fileItemSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fileItemSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fileItemSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fileItemSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fileItemSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fileItemSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.fileItemSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.fileItemSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.fileItemSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.fileItemSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fileItemSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.fileThumbSize}: 2.5rem; ${tokens.fileThumbRadius}: 0.625rem; @@ -177,12 +199,12 @@ export const config = { ${tokens.scrollbarWidth}: 0.188rem; ${tokens.scrollbarBorderWidth}: 0.063rem; - ${tokens.textFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFontSize}: ${bodyL.fontSize}; + ${tokens.textFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFontWeight}: ${bodyL.fontWeight}; + ${tokens.textLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textLineHeight}: ${bodyL.lineHeight}; ${tokens.actionsGap}: 0.5rem; ${tokens.actionsEditingGap}: 0.125rem; @@ -199,19 +221,19 @@ export const config = { ${tokens.fileItemGap}: 0.625rem; ${tokens.fileItemTextboxGap}: 0.125rem; - ${tokens.fileItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fileItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fileItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fileItemTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fileItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fileItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fileItemTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.fileItemTitleFontSize}: ${bodyM.fontSize}; + ${tokens.fileItemTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.fileItemTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.fileItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fileItemTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.fileItemSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fileItemSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fileItemSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fileItemSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fileItemSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fileItemSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fileItemSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.fileItemSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.fileItemSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.fileItemSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.fileItemSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fileItemSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.fileThumbSize}: 2.25rem; ${tokens.fileThumbRadius}: 0.375rem; @@ -229,12 +251,12 @@ export const config = { ${tokens.scrollbarWidth}: 0.188rem; ${tokens.scrollbarBorderWidth}: 0.063rem; - ${tokens.textFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFontSize}: ${bodyM.fontSize}; + ${tokens.textFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFontWeight}: ${bodyM.fontWeight}; + ${tokens.textLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textLineHeight}: ${bodyM.lineHeight}; ${tokens.actionsGap}: 0.5rem; ${tokens.actionsEditingGap}: 0.125rem; @@ -251,19 +273,19 @@ export const config = { ${tokens.fileItemGap}: 0.5rem; ${tokens.fileItemTextboxGap}: 0.125rem; - ${tokens.fileItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fileItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fileItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fileItemTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fileItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fileItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fileItemTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.fileItemTitleFontSize}: ${bodyS.fontSize}; + ${tokens.fileItemTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.fileItemTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.fileItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fileItemTitleLineHeight}: ${bodyS.lineHeight}; - ${tokens.fileItemSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fileItemSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fileItemSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fileItemSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fileItemSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fileItemSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fileItemSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.fileItemSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.fileItemSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.fileItemSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.fileItemSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fileItemSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.fileThumbSize}: 2rem; ${tokens.fileThumbRadius}: 0.375rem; @@ -281,12 +303,12 @@ export const config = { ${tokens.scrollbarWidth}: 0.188rem; ${tokens.scrollbarBorderWidth}: 0.063rem; - ${tokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFontSize}: ${bodyS.fontSize}; + ${tokens.textFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFontWeight}: ${bodyS.fontWeight}; + ${tokens.textLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textLineHeight}: ${bodyS.lineHeight}; ${tokens.actionsGap}: 0.5rem; ${tokens.actionsEditingGap}: 0.125rem; @@ -303,19 +325,19 @@ export const config = { ${tokens.fileItemGap}: 0.375rem; ${tokens.fileItemTextboxGap}: 0.125rem; - ${tokens.fileItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fileItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fileItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fileItemTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fileItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fileItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fileItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.fileItemTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.fileItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.fileItemTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.fileItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fileItemTitleLineHeight}: ${bodyXS.lineHeight}; - ${tokens.fileItemSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fileItemSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fileItemSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fileItemSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fileItemSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fileItemSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fileItemSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.fileItemSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.fileItemSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.fileItemSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.fileItemSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fileItemSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.fileThumbSize}: 1.75rem; ${tokens.fileThumbRadius}: 0.25rem; @@ -333,12 +355,12 @@ export const config = { ${tokens.scrollbarWidth}: 0.188rem; ${tokens.scrollbarBorderWidth}: 0.063rem; - ${tokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFontSize}: ${bodyXS.fontSize}; + ${tokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textLineHeight}: ${bodyXS.lineHeight}; ${tokens.actionsGap}: 0.5rem; ${tokens.actionsEditingGap}: 0.125rem; @@ -355,19 +377,19 @@ export const config = { ${tokens.fileItemGap}: 0.375rem; ${tokens.fileItemTextboxGap}: 0.125rem; - ${tokens.fileItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fileItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fileItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fileItemTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fileItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fileItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fileItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.fileItemTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.fileItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.fileItemTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.fileItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fileItemTitleLineHeight}: ${bodyXS.lineHeight}; - ${tokens.fileItemSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fileItemSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fileItemSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fileItemSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fileItemSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fileItemSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fileItemSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.fileItemSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.fileItemSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.fileItemSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.fileItemSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fileItemSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.fileThumbSize}: 1.75rem; ${tokens.fileThumbRadius}: 0.25rem; @@ -377,12 +399,12 @@ export const config = { }, attachmentsView: { default: css` - ${tokens.fileContentBackgroundColor}: var(--surface-solid-card); - ${tokens.imageBorderColor}: var(--surface-solid-card); + ${tokens.fileContentBackgroundColor}: ${surfaceSolidCard}; + ${tokens.imageBorderColor}: ${surfaceSolidCard}; `, secondary: css` - ${tokens.fileContentBackgroundColor}: var(--surface-solid-secondary); - ${tokens.imageBorderColor}: var(--surface-solid-secondary); + ${tokens.fileContentBackgroundColor}: ${surfaceSolidSecondary}; + ${tokens.imageBorderColor}: ${surfaceSolidSecondary}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/_beta/Popover/Popover.closeInner.config.ts b/packages/plasma-new-hope/src/examples/components/_beta/Popover/Popover.closeInner.config.ts index 65326b198aa..1ffe17713c5 100644 --- a/packages/plasma-new-hope/src/examples/components/_beta/Popover/Popover.closeInner.config.ts +++ b/packages/plasma-new-hope/src/examples/components/_beta/Popover/Popover.closeInner.config.ts @@ -1,3 +1,14 @@ +import { + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + shadowDownSoftM, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { _beta_popoverTokens as tokens } from 'src/components/_beta/Popover'; @@ -9,18 +20,18 @@ export const config = { variations: { view: { default: css` - ${tokens.backgroundColor}: var(--surface-solid-card); - ${tokens.boxShadow}: var(--shadow-down-soft-m); - ${tokens.iconColor}: var(--text-secondary); - ${tokens.iconColorHover}: var(--text-secondary-hover); - ${tokens.iconColorActive}: var(--text-secondary-active); + ${tokens.backgroundColor}: ${surfaceSolidCard}; + ${tokens.boxShadow}: ${shadowDownSoftM}; + ${tokens.iconColor}: ${textSecondary}; + ${tokens.iconColorHover}: ${textSecondaryHover}; + ${tokens.iconColorActive}: ${textSecondaryActive}; `, accent: css` - ${tokens.backgroundColor}: var(--surface-accent); - ${tokens.boxShadow}: var(--shadow-down-soft-m); - ${tokens.iconColor}: var(--on-dark-text-secondary); - ${tokens.iconColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.iconColorActive}: var(--on-dark-text-secondary-active); + ${tokens.backgroundColor}: ${surfaceAccent}; + ${tokens.boxShadow}: ${shadowDownSoftM}; + ${tokens.iconColor}: ${onDarkTextSecondary}; + ${tokens.iconColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.iconColorActive}: ${onDarkTextSecondaryActive}; `, }, size: { diff --git a/packages/plasma-new-hope/src/examples/components/_beta/Popover/Popover.closeNone.config.ts b/packages/plasma-new-hope/src/examples/components/_beta/Popover/Popover.closeNone.config.ts index d31857c32c0..5277f35041d 100644 --- a/packages/plasma-new-hope/src/examples/components/_beta/Popover/Popover.closeNone.config.ts +++ b/packages/plasma-new-hope/src/examples/components/_beta/Popover/Popover.closeNone.config.ts @@ -1,3 +1,4 @@ +import { shadowDownSoftM, surfaceAccent, surfaceSolidCard } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { _beta_popoverTokens as tokens } from 'src/components/_beta/Popover'; @@ -9,12 +10,12 @@ export const config = { variations: { view: { default: css` - ${tokens.backgroundColor}: var(--surface-solid-card); - ${tokens.boxShadow}: var(--shadow-down-soft-m); + ${tokens.backgroundColor}: ${surfaceSolidCard}; + ${tokens.boxShadow}: ${shadowDownSoftM}; `, accent: css` - ${tokens.backgroundColor}: var(--surface-accent); - ${tokens.boxShadow}: var(--shadow-down-soft-m); + ${tokens.backgroundColor}: ${surfaceAccent}; + ${tokens.boxShadow}: ${shadowDownSoftM}; `, }, size: { diff --git a/packages/plasma-new-hope/src/examples/components/_beta/Tooltip/Tooltip.config.ts b/packages/plasma-new-hope/src/examples/components/_beta/Tooltip/Tooltip.config.ts index 806f43459ea..62b2a8ba4e7 100644 --- a/packages/plasma-new-hope/src/examples/components/_beta/Tooltip/Tooltip.config.ts +++ b/packages/plasma-new-hope/src/examples/components/_beta/Tooltip/Tooltip.config.ts @@ -1,3 +1,12 @@ +import { + bodyS, + bodyXS, + onDarkTextPrimary, + shadowDownSoftM, + surfaceAccent, + surfaceSolidCard, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { _beta_tooltipTokens as tokens } from 'src/components/_beta/Tooltip'; @@ -9,14 +18,14 @@ export const config = { variations: { view: { default: css` - ${tokens.backgroundColor}: var(--surface-solid-card); - ${tokens.boxShadow}: var(--shadow-down-soft-m); - ${tokens.color}: var(--text-primary); + ${tokens.backgroundColor}: ${surfaceSolidCard}; + ${tokens.boxShadow}: ${shadowDownSoftM}; + ${tokens.color}: ${textPrimary}; `, accent: css` - ${tokens.backgroundColor}: var(--surface-accent); - ${tokens.boxShadow}: var(--shadow-down-soft-m); - ${tokens.color}: var(--on-dark-text-primary); + ${tokens.backgroundColor}: ${surfaceAccent}; + ${tokens.boxShadow}: ${shadowDownSoftM}; + ${tokens.color}: ${onDarkTextPrimary}; `, }, size: { @@ -24,23 +33,23 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.padding}: 0.625rem 0.875rem; ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.5rem; ${tokens.padding}: 0.5rem 0.75rem; ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/typography/components/Body/Body.config.ts b/packages/plasma-new-hope/src/examples/components/typography/components/Body/Body.config.ts index 0cfb8cb0440..cd8e5eb7870 100644 --- a/packages/plasma-new-hope/src/examples/components/typography/components/Body/Body.config.ts +++ b/packages/plasma-new-hope/src/examples/components/typography/components/Body/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tokens } from '../../../../../components/Typography/tokens'; @@ -9,54 +26,54 @@ export const config = { variations: { size: { l: css` - ${tokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.typoFontFamily}: ${bodyL.fontFamily}; + ${tokens.typoFontSize}: ${bodyL.fontSize}; + ${tokens.typoFontStyle}: ${bodyL.fontStyle}; + ${tokens.typoFontWeight}: ${bodyL.fontWeight}; + ${tokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, m: css` - ${tokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.typoFontFamily}: ${bodyM.fontFamily}; + ${tokens.typoFontSize}: ${bodyM.fontSize}; + ${tokens.typoFontStyle}: ${bodyM.fontStyle}; + ${tokens.typoFontWeight}: ${bodyM.fontWeight}; + ${tokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, s: css` - ${tokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.typoFontFamily}: ${bodyS.fontFamily}; + ${tokens.typoFontSize}: ${bodyS.fontSize}; + ${tokens.typoFontStyle}: ${bodyS.fontStyle}; + ${tokens.typoFontWeight}: ${bodyS.fontWeight}; + ${tokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, xs: css` - ${tokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${tokens.typoFontSize}: ${bodyXS.fontSize}; + ${tokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${tokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${tokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` - ${tokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.typoFontSize}: ${bodyXXS.fontSize}; + ${tokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/typography/components/Dspl/Dspl.config.ts b/packages/plasma-new-hope/src/examples/components/typography/components/Dspl/Dspl.config.ts index a3cb2fec094..fb7d16062fc 100644 --- a/packages/plasma-new-hope/src/examples/components/typography/components/Dspl/Dspl.config.ts +++ b/packages/plasma-new-hope/src/examples/components/typography/components/Dspl/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tokens } from '../../../../../components/Typography/tokens'; @@ -9,34 +20,34 @@ export const config = { variations: { size: { l: css` - ${tokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${tokens.typoFontFamily}: ${dsplL.fontFamily}; + ${tokens.typoFontSize}: ${dsplL.fontSize}; + ${tokens.typoFontStyle}: ${dsplL.fontStyle}; + ${tokens.typoFontWeight}: ${dsplL.fontWeight}; + ${tokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${tokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, m: css` - ${tokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${tokens.typoFontFamily}: ${dsplM.fontFamily}; + ${tokens.typoFontSize}: ${dsplM.fontSize}; + ${tokens.typoFontStyle}: ${dsplM.fontStyle}; + ${tokens.typoFontWeight}: ${dsplM.fontWeight}; + ${tokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${tokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, s: css` - ${tokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${tokens.typoFontFamily}: ${dsplS.fontFamily}; + ${tokens.typoFontSize}: ${dsplS.fontSize}; + ${tokens.typoFontStyle}: ${dsplS.fontStyle}; + ${tokens.typoFontWeight}: ${dsplS.fontWeight}; + ${tokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${tokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/typography/components/Heading/Heading.config.ts b/packages/plasma-new-hope/src/examples/components/typography/components/Heading/Heading.config.ts index be669885ce0..fda9e71d077 100644 --- a/packages/plasma-new-hope/src/examples/components/typography/components/Heading/Heading.config.ts +++ b/packages/plasma-new-hope/src/examples/components/typography/components/Heading/Heading.config.ts @@ -1,3 +1,23 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, + h6, + h6Bold, + h6Medium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tokens } from '../../../../../components/Typography/tokens'; @@ -9,64 +29,64 @@ export const config = { variations: { size: { h1: css` - ${tokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${tokens.typoFontFamily}: ${h1.fontFamily}; + ${tokens.typoFontSize}: ${h1.fontSize}; + ${tokens.typoFontStyle}: ${h1.fontStyle}; + ${tokens.typoFontWeight}: ${h1.fontWeight}; + ${tokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${tokens.typoFontLineHeight}: ${h1.lineHeight}; `, h2: css` - ${tokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${tokens.typoFontFamily}: ${h2.fontFamily}; + ${tokens.typoFontSize}: ${h2.fontSize}; + ${tokens.typoFontStyle}: ${h2.fontStyle}; + ${tokens.typoFontWeight}: ${h2.fontWeight}; + ${tokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${tokens.typoFontLineHeight}: ${h2.lineHeight}; `, h3: css` - ${tokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.typoFontFamily}: ${h3.fontFamily}; + ${tokens.typoFontSize}: ${h3.fontSize}; + ${tokens.typoFontStyle}: ${h3.fontStyle}; + ${tokens.typoFontWeight}: ${h3.fontWeight}; + ${tokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.typoFontLineHeight}: ${h3.lineHeight}; `, h4: css` - ${tokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.typoFontFamily}: ${h4.fontFamily}; + ${tokens.typoFontSize}: ${h4.fontSize}; + ${tokens.typoFontStyle}: ${h4.fontStyle}; + ${tokens.typoFontWeight}: ${h4.fontWeight}; + ${tokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.typoFontLineHeight}: ${h4.lineHeight}; `, h5: css` - ${tokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.typoFontFamily}: ${h5.fontFamily}; + ${tokens.typoFontSize}: ${h5.fontSize}; + ${tokens.typoFontStyle}: ${h5.fontStyle}; + ${tokens.typoFontWeight}: ${h5.fontWeight}; + ${tokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.typoFontLineHeight}: ${h5.lineHeight}; `, h6: css` - ${tokens.typoFontFamily}: var(--plasma-typo-h6-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-h6-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-h6-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + ${tokens.typoFontFamily}: ${h6.fontFamily}; + ${tokens.typoFontSize}: ${h6.fontSize}; + ${tokens.typoFontStyle}: ${h6.fontStyle}; + ${tokens.typoFontWeight}: ${h6.fontWeight}; + ${tokens.typoFontWeightBold}: ${h6Bold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${h6Medium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${h6.letterSpacing}; + ${tokens.typoFontLineHeight}: ${h6.lineHeight}; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/components/typography/components/Text/Text.config.ts b/packages/plasma-new-hope/src/examples/components/typography/components/Text/Text.config.ts index 2a13ce83602..2dd024921cb 100644 --- a/packages/plasma-new-hope/src/examples/components/typography/components/Text/Text.config.ts +++ b/packages/plasma-new-hope/src/examples/components/typography/components/Text/Text.config.ts @@ -1,3 +1,17 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css } from '@linaria/core'; import { tokens } from '../../../../../components/Typography/tokens'; @@ -9,44 +23,44 @@ export const config = { variations: { size: { l: css` - ${tokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.typoFontFamily}: ${textL.fontFamily}; + ${tokens.typoFontSize}: ${textL.fontSize}; + ${tokens.typoFontStyle}: ${textL.fontStyle}; + ${tokens.typoFontWeight}: ${textL.fontWeight}; + ${tokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${tokens.typoFontLineHeight}: ${textL.lineHeight}; `, m: css` - ${tokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.typoFontFamily}: ${textM.fontFamily}; + ${tokens.typoFontSize}: ${textM.fontSize}; + ${tokens.typoFontStyle}: ${textM.fontStyle}; + ${tokens.typoFontWeight}: ${textM.fontWeight}; + ${tokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${tokens.typoFontLineHeight}: ${textM.lineHeight}; `, s: css` - ${tokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.typoFontFamily}: ${textS.fontFamily}; + ${tokens.typoFontSize}: ${textS.fontSize}; + ${tokens.typoFontStyle}: ${textS.fontStyle}; + ${tokens.typoFontWeight}: ${textS.fontWeight}; + ${tokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${tokens.typoFontLineHeight}: ${textS.lineHeight}; `, xs: css` - ${tokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${tokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${tokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${tokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.typoFontFamily}: ${textXS.fontFamily}; + ${tokens.typoFontSize}: ${textXS.fontSize}; + ${tokens.typoFontStyle}: ${textXS.fontStyle}; + ${tokens.typoFontWeight}: ${textXS.fontWeight}; + ${tokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${tokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${tokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, From 7d42039edf9a3387d9d12abc3c16b77a143031f2 Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 19:51:23 +0300 Subject: [PATCH 09/24] chore(plasma-web): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 297 ++--- .../src/components/Attach/Attach.config.ts | 899 +++++++------- .../Autocomplete/Autocomplete.config.ts | 591 ++++----- .../src/components/Badge/Badge.config.ts | 158 ++- .../Breadcrumbs/Breadcrumbs.config.ts | 68 +- .../src/components/Button/Button.config.ts | 272 +++-- .../ButtonGroup/ButtonGroup.config.ts | 318 ++--- .../components/Calendar/Calendar.config.ts | 460 +++---- .../Calendar/CalendarDouble.config.ts | 460 +++---- .../src/components/Card/Card.config.ts | 3 +- .../components/Carousel/Carousel.config.ts | 24 +- .../src/components/Cell/Cell.config.ts | 169 +-- .../components/Checkbox/Checkbox.config.ts | 164 +-- .../components/ChipGroup/ChipGroup.config.ts | 102 +- .../components/CodeField/CodeField.config.ts | 83 +- .../components/Combobox/Combobox.config.ts | 789 ++++++------ .../Combobox/Legacy/Combobox.config.ts | 267 ++-- .../src/components/Counter/Counter.config.ts | 107 +- .../DatePicker/DatePicker.clear.config.ts | 1035 ++++++++-------- .../DatePicker/DatePicker.config.ts | 1028 ++++++++-------- .../DateTimePicker/DateTimePicker.config.ts | 956 ++++++++------- .../src/components/Divider/Divider.config.ts | 14 +- .../src/components/Drawer/Drawer.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 132 +- .../Dropdown/components/DropdownOld.config.ts | 63 +- .../components/Dropzone/Dropzone.config.ts | 53 +- .../components/Editable/Editable.config.ts | 17 +- .../EmbedIconButton/EmbedIconButton.config.ts | 125 +- .../EmptyState/EmptyState.config.ts | 49 +- .../src/components/File/File.config.ts | 158 +-- .../IconButton/IconButton.config.ts | 182 +-- .../InformationWrapper.config.ts | 295 ++--- .../LinkButton/LinkButton.config.ts | 210 ++-- .../src/components/List/List.config.ts | 77 +- .../src/components/Loader/Loader.config.ts | 181 +-- .../src/components/ModalBase/Modal.config.ts | 20 +- .../NavigationDrawer.config.ts | 64 +- .../src/components/Note/Note.config.ts | 164 +-- .../Notification/Notification.config.ts | 197 +-- .../NumberInput/NumberInput.config.ts | 285 +++-- .../Pagination/Pagination.config.ts | 278 +++-- .../src/components/Popover/Popover.config.ts | 5 +- .../components/Progress/Progress.config.ts | 60 +- .../ProgressBarCircular.config.ts | 146 ++- .../components/Radiobox/Radiobox.config.ts | 162 +-- .../components/Range/Range.clear.config.ts | 484 ++++---- .../src/components/Range/Range.config.ts | 474 ++++---- .../src/components/Rating/Rating.config.ts | 385 +++--- .../components/Scrollbar/Scrollbar.config.ts | 6 +- .../components/Segment/SegmentGroup.config.ts | 11 +- .../components/Segment/SegmentItem.config.ts | 168 +-- .../src/components/Select/Select.config.ts | 1077 +++++++++-------- .../src/components/Slider/Slider.config.ts | 208 ++-- .../src/components/Spinner/Spinner.config.ts | 28 +- .../src/components/Steps/Steps.config.ts | 334 ++--- .../src/components/Switch/Switch.config.ts | 103 +- .../src/components/Table/Table.config.ts | 180 +-- .../HorizontalIconTabItem.config.ts | 70 +- .../horizontal/HorizontalTabItem.config.ts | 258 ++-- .../Tabs/horizontal/HorizontalTabs.config.ts | 36 +- .../vertical/VerticalIconTabItem.config.ts | 23 +- .../Tabs/vertical/VerticalTabItem.config.ts | 90 +- .../Tabs/vertical/VerticalTabs.config.ts | 17 +- .../TextArea/TextArea.clear.config.ts | 479 ++++---- .../components/TextArea/TextArea.config.ts | 678 ++++++----- .../TextField/TextField.clear.config.ts | 789 ++++++------ .../components/TextField/TextField.config.ts | 820 +++++++------ .../TextFieldGroup/TextFieldGroup.config.ts | 193 +-- .../TextFieldSlider.clear.config.ts | 606 +++++----- .../TextFieldSlider/TextFieldSlider.config.ts | 684 ++++++----- .../TimePicker/TimePicker.config.ts | 349 +++--- .../src/components/Toast/Toast.config.ts | 78 +- .../src/components/Toolbar/Toolbar.config.ts | 11 +- .../src/components/Tooltip/Tooltip.config.ts | 33 +- .../src/components/Tree/Tree.config.ts | 106 +- .../src/components/Typography/Body.config.ts | 97 +- .../src/components/Typography/Dspl.config.ts | 59 +- .../components/Typography/Heading.config.ts | 116 +- .../src/components/Typography/Text.config.ts | 78 +- 79 files changed, 10972 insertions(+), 9357 deletions(-) diff --git a/packages/plasma-web/src/components/Accordion/Accordion.config.ts b/packages/plasma-web/src/components/Accordion/Accordion.config.ts index 716aee00aa7..4d8b1f39e95 100644 --- a/packages/plasma-web/src/components/Accordion/Accordion.config.ts +++ b/packages/plasma-web/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,30 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,12 +38,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorder}: none; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); @@ -25,12 +52,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-transparent-primary); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceTransparentPrimary}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorder}: none; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); @@ -39,29 +66,29 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorder}: 0.063rem solid var(--surface-transparent-secondary); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-transparent-secondary); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorder}: 0.063rem solid ${surfaceTransparentSecondary}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceTransparentSecondary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, clear: css` ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorder}: none; - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -72,19 +99,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.875rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyLBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -92,19 +119,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -112,19 +139,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -132,19 +159,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXSBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.lineHeight}; `, h2: css` ${accordionTokens.accordionItemPaddingVertical}: 1rem; @@ -153,19 +180,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h2Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -174,19 +201,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 0.688rem; @@ -194,19 +221,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h5: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -214,19 +241,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h6: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -234,19 +261,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h6Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, stretching: { diff --git a/packages/plasma-web/src/components/Attach/Attach.config.ts b/packages/plasma-web/src/components/Attach/Attach.config.ts index b62ab061eec..3f1829e335d 100644 --- a/packages/plasma-web/src/components/Attach/Attach.config.ts +++ b/packages/plasma-web/src/components/Attach/Attach.config.ts @@ -1,3 +1,54 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,439 +61,439 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.buttonColorActive}: var(--text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.buttonColorHover}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.buttonColorActive}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.iconButtonColorHover}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.iconButtonColorActive}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary-hover); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.buttonColorActive}: var(--text-primary-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColorHover}: ${textPrimaryHover}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.buttonColorActive}: ${textPrimaryActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary-hover); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonColorActive}: var(--text-primary-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonColorActive}: ${textPrimaryActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, success: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-positive); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfacePositive}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, warning: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-warning); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceWarning}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, critical: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-negative); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceNegative}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-negative-active); - - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; + + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, dark: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, black: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, white: css` - ${attachTokens.buttonColor}: var(--on-light-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.buttonColor}: ${onLightTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -457,12 +508,12 @@ export const config = { ${attachTokens.buttonWidth}: 12.5rem; ${attachTokens.buttonPadding}: 1.5rem; ${attachTokens.buttonRadius}: 0.875rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyL.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -481,37 +532,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonHeight}: 3.5rem; ${attachTokens.iconButtonWidth}: 3.5rem; ${attachTokens.iconButtonPadding}: 1.5rem; ${attachTokens.iconButtonRadius}: 0.875rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -520,12 +571,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -547,12 +598,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -571,37 +622,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -610,12 +661,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -637,12 +688,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -661,37 +712,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -700,12 +751,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -727,12 +778,12 @@ export const config = { ${attachTokens.buttonWidth}: 10rem; ${attachTokens.buttonPadding}: 0.75rem; ${attachTokens.buttonRadius}: 0.5rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -751,37 +802,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.25rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2rem; ${attachTokens.iconButtonWidth}: 2rem; ${attachTokens.iconButtonPadding}: 0.75rem; ${attachTokens.iconButtonRadius}: 0.5rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -790,12 +841,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/plasma-web/src/components/Autocomplete/Autocomplete.config.ts b/packages/plasma-web/src/components/Autocomplete/Autocomplete.config.ts index 43b5d2f5ad2..9aba5ef7658 100644 --- a/packages/plasma-web/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/plasma-web/src/components/Autocomplete/Autocomplete.config.ts @@ -1,3 +1,38 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + outlineNegative, + outlineNegativeHover, + outlinePositive, + outlinePositiveHover, + outlineReadOnly, + outlineTransparentPrimary, + outlineTransparentPrimaryHover, + outlineWarning, + outlineWarningHover, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,188 +44,188 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldBorderColor}: var(--outline-transparent-primary); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldBorderColor}: ${outlineTransparentPrimary}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-solid-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceSolidSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldBorderColor}: var(--outline-positive); - ${tokens.textFieldBorderColorHover}: var(--outline-positive-hover); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-positive); - ${tokens.textFieldDividerColorHover}: var(--surface-positive); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldBorderColor}: ${outlinePositive}; + ${tokens.textFieldBorderColorHover}: ${outlinePositiveHover}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfacePositive}; + ${tokens.textFieldDividerColorHover}: ${surfacePositive}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldBorderColor}: var(--outline-warning); - ${tokens.textFieldBorderColorHover}: var(--outline-warning-hover); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-warning); - ${tokens.textFieldDividerColorHover}: var(--surface-warning); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldBorderColor}: ${outlineWarning}; + ${tokens.textFieldBorderColorHover}: ${outlineWarningHover}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceWarning}; + ${tokens.textFieldDividerColorHover}: ${surfaceWarning}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldBorderColor}: var(--outline-negative); - ${tokens.textFieldBorderColorHover}: var(--outline-negative-hover); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--surface-negative); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldBorderColor}: ${outlineNegative}; + ${tokens.textFieldBorderColorHover}: ${outlineNegativeHover}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${surfaceNegative}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, }, size: { @@ -210,21 +245,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -232,12 +267,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -257,12 +292,12 @@ export const config = { ${tokens.itemPadding}: 1.0625rem 1rem; ${tokens.itemBorderRadius}: 0.75rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; ${tokens.emptyStateGap}: 0.5rem; @@ -286,21 +321,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -308,12 +343,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -333,12 +368,12 @@ export const config = { ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; ${tokens.emptyStateGap}: 0.375rem; @@ -362,21 +397,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -384,12 +419,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -409,12 +444,12 @@ export const config = { ${tokens.itemPadding}: 0.6875rem 0.75rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -438,21 +473,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -460,12 +495,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -485,12 +520,12 @@ export const config = { ${tokens.itemPadding}: 0.5625rem 0.5rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; ${tokens.emptyStateGap}: 0.25rem; @@ -501,22 +536,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -529,12 +564,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -553,12 +588,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -577,14 +612,14 @@ export const config = { readOnly: { true: css` ${tokens.textFieldReadOnlyOpacity}: 1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-clear); - ${tokens.textFieldBorderColorReadOnly}: var(--outline-read-only); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--outline-read-only); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceClear}; + ${tokens.textFieldBorderColorReadOnly}: ${outlineReadOnly}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${outlineReadOnly}; ${tokens.textFieldBorderColor}: transparent; ${tokens.textFieldBorderWidth}: 0.063rem; `, diff --git a/packages/plasma-web/src/components/Badge/Badge.config.ts b/packages/plasma-web/src/components/Badge/Badge.config.ts index 1390e5abb1e..f9b5730e489 100644 --- a/packages/plasma-web/src/components/Badge/Badge.config.ts +++ b/packages/plasma-web/src/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,80 +36,80 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, /** * @deprecated * использовать `default` */ primary: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -91,12 +119,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -110,12 +138,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -129,12 +157,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -148,12 +176,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -172,7 +200,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/plasma-web/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/plasma-web/src/components/Breadcrumbs/Breadcrumbs.config.ts index 1661a5df0e3..2e484ec576f 100644 --- a/packages/plasma-web/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/plasma-web/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,53 +20,53 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { l: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.5rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-l-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-l-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-l-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-l-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-l-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight}; `, m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${breadcrumbsTokens.breadcrumbsGap}: 0rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-xs-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-xs-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-xs-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-xs-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-xs-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-web/src/components/Button/Button.config.ts b/packages/plasma-web/src/components/Button/Button.config.ts index d47ee26a019..00d9b85f1a5 100644 --- a/packages/plasma-web/src/components/Button/Button.config.ts +++ b/packages/plasma-web/src/components/Button/Button.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,118 +53,118 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, /** * @deprecated * использовать `default` */ primary: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -129,12 +173,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.75rem; ${buttonTokens.buttonRadius}: 1rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.5rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -150,12 +194,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 0.875rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -171,12 +215,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -192,12 +236,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -213,12 +257,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -234,12 +278,12 @@ export const config = { ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: 0.375rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 0.75rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -258,7 +302,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/plasma-web/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/plasma-web/src/components/ButtonGroup/ButtonGroup.config.ts index cd13bd54c9b..a7b9fec75f9 100644 --- a/packages/plasma-web/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/plasma-web/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,140 +56,140 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, /** * @deprecated * использовать `default` */ primary: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, success: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; `, }, size: { @@ -152,12 +200,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 4rem; ${buttonGroupTokens.buttonPadding}: 1.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, l: css` ${buttonGroupTokens.buttonDefaultRadius}: 0.875rem; @@ -166,12 +214,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3.5rem; ${buttonGroupTokens.buttonPadding}: 1.5rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, m: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -181,12 +229,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -195,12 +243,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -209,12 +257,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -223,12 +271,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 1.5rem; ${buttonGroupTokens.buttonPadding}: 0.625rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/plasma-web/src/components/Calendar/Calendar.config.ts b/packages/plasma-web/src/components/Calendar/Calendar.config.ts index fc0a15388db..2950397881c 100644 --- a/packages/plasma-web/src/components/Calendar/Calendar.config.ts +++ b/packages/plasma-web/src/components/Calendar/Calendar.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,38 +35,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -51,46 +77,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +126,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 4rem; ${calendarBaseTokens.iconButtonWidth}: 4rem; @@ -120,46 +146,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -169,13 +195,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3.5rem; ${calendarBaseTokens.iconButtonWidth}: 3.5rem; @@ -189,46 +215,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -238,13 +264,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -258,46 +284,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -307,13 +333,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -327,46 +353,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -376,13 +402,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; @@ -400,12 +426,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -414,7 +440,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -425,12 +451,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -439,7 +465,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts b/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts index 70c9a8be880..13f06499b47 100644 --- a/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,39 +35,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -52,46 +78,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +127,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 4rem; ${calendarDoubleTokens.iconButtonWidth}: 4rem; @@ -121,46 +147,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -170,13 +196,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; @@ -190,46 +216,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -239,13 +265,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -259,46 +285,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -308,13 +334,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -328,46 +354,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +403,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; @@ -401,12 +427,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -415,7 +441,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -426,12 +452,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -440,7 +466,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/plasma-web/src/components/Card/Card.config.ts b/packages/plasma-web/src/components/Card/Card.config.ts index 2899613fb13..6928ceeea49 100644 --- a/packages/plasma-web/src/components/Card/Card.config.ts +++ b/packages/plasma-web/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,7 +9,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/plasma-web/src/components/Carousel/Carousel.config.ts b/packages/plasma-web/src/components/Carousel/Carousel.config.ts index f3fd82e4491..a1921aafad9 100644 --- a/packages/plasma-web/src/components/Carousel/Carousel.config.ts +++ b/packages/plasma-web/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +16,14 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary); - ${tokens.paginationDotActiveBackground}: var(--surface-solid-default); - ${tokens.controlIconButtonColor}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.controlIconButtonColorHover}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.controlIconButtonColorActive}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary}; + ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault}; + ${tokens.controlIconButtonColor}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.controlIconButtonColorHover}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.controlIconButtonColorActive}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, }, size: { diff --git a/packages/plasma-web/src/components/Cell/Cell.config.ts b/packages/plasma-web/src/components/Cell/Cell.config.ts index 6588088c11f..678db1ed167 100644 --- a/packages/plasma-web/src/components/Cell/Cell.config.ts +++ b/packages/plasma-web/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -87,26 +88,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -119,26 +120,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-web/src/components/Checkbox/Checkbox.config.ts b/packages/plasma-web/src/components/Checkbox/Checkbox.config.ts index 73322fec3c9..077a813e636 100644 --- a/packages/plasma-web/src/components/Checkbox/Checkbox.config.ts +++ b/packages/plasma-web/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,18 +33,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -39,18 +55,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${checkboxTokens.margin}: 0; @@ -60,100 +76,100 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.125rem; ${checkboxTokens.contentTopOffset}: 0.0625rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyL.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${checkboxTokens.fillColor}: var(--text-primary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPrimary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated primary: css` - ${checkboxTokens.fillColor}: var(--text-primary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPrimary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${checkboxTokens.fillColor}: var(--text-secondary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textSecondary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${checkboxTokens.fillColor}: var(--text-tertiary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textTertiary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${checkboxTokens.fillColor}: var(--text-paragraph); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textParagraph}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${checkboxTokens.fillColor}: var(--text-positive); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPositive}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${checkboxTokens.fillColor}: var(--text-warning); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textWarning}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, negative: css` - ${checkboxTokens.fillColor}: var(--text-negative); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textNegative}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-negative); + ${checkboxTokens.triggerBorderColor}: ${textNegative}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -164,7 +180,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/plasma-web/src/components/ChipGroup/ChipGroup.config.ts b/packages/plasma-web/src/components/ChipGroup/ChipGroup.config.ts index 2bed06ad8c0..fa90e8db881 100644 --- a/packages/plasma-web/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/plasma-web/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +26,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +57,12 @@ export const config = { ${tokens.chipHeight}: 3rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.5rem; @@ -60,12 +78,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -81,12 +99,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; @@ -102,12 +120,12 @@ export const config = { ${tokens.chipHeight}: 1.5rem; ${tokens.chipPadding}: 0 0.625rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/plasma-web/src/components/CodeField/CodeField.config.ts b/packages/plasma-web/src/components/CodeField/CodeField.config.ts index 475172ecbdb..d9ddef187da 100644 --- a/packages/plasma-web/src/components/CodeField/CodeField.config.ts +++ b/packages/plasma-web/src/components/CodeField/CodeField.config.ts @@ -1,3 +1,18 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodyXS, + outlineAccent, + surfaceAccent, + surfaceNegative, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, codeFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,19 +24,19 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--surface-accent); + ${tokens.caretColor}: ${surfaceAccent}; - ${tokens.captionColor}: var(--text-secondary); - ${tokens.captionColorError}: var(--text-negative); + ${tokens.captionColor}: ${textSecondary}; + ${tokens.captionColorError}: ${textNegative}; - ${tokens.codeColor}: var(--text-primary); - ${tokens.codeColorError}: var(--text-negative); - ${tokens.borderColorFocus}: var(--outline-accent); + ${tokens.codeColor}: ${textPrimary}; + ${tokens.codeColorError}: ${textNegative}; + ${tokens.borderColorFocus}: ${outlineAccent}; - ${tokens.borderColor}: var(--surface-transparent-tertiary); - ${tokens.borderColorHover}: var(--text-secondary); - ${tokens.borderColorFocus}: var(--surface-accent); - ${tokens.borderErrorColor}: var(--surface-negative); + ${tokens.borderColor}: ${surfaceTransparentTertiary}; + ${tokens.borderColorHover}: ${textSecondary}; + ${tokens.borderColorFocus}: ${surfaceAccent}; + ${tokens.borderErrorColor}: ${surfaceNegative}; `, }, size: { @@ -34,19 +49,19 @@ export const config = { ${tokens.codeItemWidth}: 2.75rem; ${tokens.codeItemHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.captionFontFamily}: ${bodyS.fontFamily}; + ${tokens.captionFontSize}: ${bodyS.fontSize}; + ${tokens.captionFontStyle}: ${bodyS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyS.lineHeight}; ${tokens.borderWidth}: 0.063rem; ${tokens.borderRadius}: 0.875rem; @@ -62,19 +77,19 @@ export const config = { ${tokens.codeItemWidth}: 2.375rem; ${tokens.codeItemHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.captionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.captionFontSize}: ${bodyXS.fontSize}; + ${tokens.captionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyXS.lineHeight}; ${tokens.borderWidth}: 0.063rem; ${tokens.borderRadius}: 0.75rem; diff --git a/packages/plasma-web/src/components/Combobox/Combobox.config.ts b/packages/plasma-web/src/components/Combobox/Combobox.config.ts index d9901cc4e13..1ff0330396e 100644 --- a/packages/plasma-web/src/components/Combobox/Combobox.config.ts +++ b/packages/plasma-web/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,38 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + outlineNegative, + outlineNegativeHover, + outlinePositive, + outlinePositiveHover, + outlineReadOnly, + outlineTransparentPrimary, + outlineTransparentPrimaryHover, + outlineWarning, + outlineWarningHover, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,236 +44,236 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldBorderColor}: var(--outline-transparent-primary); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldBorderColor}: ${outlineTransparentPrimary}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldBorderColor}: var(--outline-positive); - ${tokens.textFieldBorderColorHover}: var(--outline-positive-hover); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldBorderColor}: ${outlinePositive}; + ${tokens.textFieldBorderColorHover}: ${outlinePositiveHover}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldBorderColor}: var(--outline-warning); - ${tokens.textFieldBorderColorHover}: var(--outline-warning-hover); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldBorderColor}: ${outlineWarning}; + ${tokens.textFieldBorderColorHover}: ${outlineWarningHover}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldBorderColor}: var(--outline-negative); - ${tokens.textFieldBorderColorHover}: var(--outline-negative-hover); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldBorderColor}: ${outlineNegative}; + ${tokens.textFieldBorderColorHover}: ${outlineNegativeHover}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -259,28 +294,28 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -308,12 +343,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 1rem; ${tokens.padding}: 0.125rem; @@ -335,19 +370,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -381,28 +416,28 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -430,12 +465,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -457,19 +492,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -503,28 +538,28 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -552,12 +587,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 0.625rem 0.875rem 0.625rem 0.875rem; ${tokens.padding}: 0.125rem; @@ -579,19 +614,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -625,28 +660,28 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -674,12 +709,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 0.5rem 0.625rem 0.5rem 0.625rem; ${tokens.padding}: 0.125rem; @@ -701,19 +736,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -733,22 +768,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -761,12 +796,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -785,12 +820,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -808,12 +843,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-clear); - ${tokens.textFieldBorderColorReadOnly}: var(--outline-read-only); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceClear}; + ${tokens.textFieldBorderColorReadOnly}: ${outlineReadOnly}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldBorderColor}: transparent; ${tokens.textFieldBorderWidth}: 0.063rem; diff --git a/packages/plasma-web/src/components/Combobox/Legacy/Combobox.config.ts b/packages/plasma-web/src/components/Combobox/Legacy/Combobox.config.ts index b00d00ac47a..29b7fb30fa6 100644 --- a/packages/plasma-web/src/components/Combobox/Legacy/Combobox.config.ts +++ b/packages/plasma-web/src/components/Combobox/Legacy/Combobox.config.ts @@ -1,3 +1,22 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceSolidCardBrightness, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textAccent, + textPrimary, + textSecondary, + textTertiary, + textTertiaryActive, + textTertiaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, comboboxOldTokens as comboboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,7 +35,7 @@ export const config = { ${comboboxTokens.paddingBottom}: 0.125rem; ${comboboxTokens.paddingLeft}: 0.125rem; - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerColor}: ${surfaceTransparentTertiary}; ${comboboxTokens.dividerHeight}: 0.063rem; ${comboboxTokens.dividerMarginTop}: 0; ${comboboxTokens.dividerMarginRight}: 0.5rem; @@ -31,12 +50,12 @@ export const config = { ${comboboxTokens.itemPaddingLeft}: 0.375rem; ${comboboxTokens.itemBorderRadius}: 0.375rem; ${comboboxTokens.itemContentLeftWidth}: 1.25rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${comboboxTokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${comboboxTokens.itemFontSize}: ${bodyXS.fontSize}; + ${comboboxTokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${comboboxTokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${comboboxTokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${comboboxTokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${comboboxTokens.chipGap}: 0.25rem; ${comboboxTokens.chipBorderRadius}: 0.125rem; @@ -46,12 +65,12 @@ export const config = { ${comboboxTokens.chipClearContentMarginLeft}: 0.25rem; ${comboboxTokens.chipClearContentMarginRight}: 0rem; ${comboboxTokens.chipCloseIconSize}: 0.75rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${comboboxTokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${comboboxTokens.chipFontSize}: ${bodyXS.fontSize}; + ${comboboxTokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${comboboxTokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${comboboxTokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${comboboxTokens.chipLineHeight}: ${bodyXS.lineHeight}; ${comboboxTokens.targetArrowRight}: 0.5rem; ${comboboxTokens.targetHeight}: 2rem; @@ -62,18 +81,18 @@ export const config = { ${comboboxTokens.targetPaddingWithInput}: 0 2.625rem 0 0.625rem; ${comboboxTokens.targetInnerTop}: 0.5rem; ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-xs-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${comboboxTokens.targetFontFamily}: ${bodyXS.fontFamily}; + ${comboboxTokens.targetFontSize}: ${bodyXS.fontSize}; + ${comboboxTokens.targetFontStyle}: ${bodyXS.fontStyle}; + ${comboboxTokens.targetFontWeight}: ${bodyXS.fontWeight}; + ${comboboxTokens.targetLetterSpacing}: ${bodyXS.letterSpacing}; + ${comboboxTokens.targetLineHeight}: ${bodyXS.lineHeight}; + ${comboboxTokens.targetLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${comboboxTokens.targetLabelInnerFontSize}: ${bodyXS.fontSize}; + ${comboboxTokens.targetLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${comboboxTokens.targetLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${comboboxTokens.targetLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${comboboxTokens.targetLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${comboboxTokens.width}: 100%; @@ -84,7 +103,7 @@ export const config = { ${comboboxTokens.paddingBottom}: 0.125rem; ${comboboxTokens.paddingLeft}: 0.125rem; - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerColor}: ${surfaceTransparentTertiary}; ${comboboxTokens.dividerHeight}: 0.063rem; ${comboboxTokens.dividerMarginTop}: 0; ${comboboxTokens.dividerMarginRight}: 0.75rem; @@ -99,12 +118,12 @@ export const config = { ${comboboxTokens.itemPaddingLeft}: 0.75rem; ${comboboxTokens.itemBorderRadius}: 0.5rem; ${comboboxTokens.itemContentLeftWidth}: 1.75rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${comboboxTokens.itemFontFamily}: ${bodyS.fontFamily}; + ${comboboxTokens.itemFontSize}: ${bodyS.fontSize}; + ${comboboxTokens.itemFontStyle}: ${bodyS.fontStyle}; + ${comboboxTokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${comboboxTokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${comboboxTokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${comboboxTokens.chipGap}: 0.25rem; ${comboboxTokens.chipBorderRadius}: 0.25rem; @@ -114,12 +133,12 @@ export const config = { ${comboboxTokens.chipClearContentMarginLeft}: 0.375rem; ${comboboxTokens.chipClearContentMarginRight}: 0rem; ${comboboxTokens.chipCloseIconSize}: 0.75rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${comboboxTokens.chipFontFamily}: ${bodyS.fontFamily}; + ${comboboxTokens.chipFontSize}: ${bodyS.fontSize}; + ${comboboxTokens.chipFontStyle}: ${bodyS.fontStyle}; + ${comboboxTokens.chipFontWeight}: ${bodyS.fontWeight}; + ${comboboxTokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${comboboxTokens.chipLineHeight}: ${bodyS.lineHeight}; ${comboboxTokens.targetArrowRight}: 0.75rem; ${comboboxTokens.targetHeight}: 2.5rem; @@ -130,18 +149,18 @@ export const config = { ${comboboxTokens.targetPaddingWithInput}: 0 3.125rem 0 0.625rem; ${comboboxTokens.targetInnerTop}: 0.5rem; ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-s-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${comboboxTokens.targetFontFamily}: ${bodyS.fontFamily}; + ${comboboxTokens.targetFontSize}: ${bodyS.fontSize}; + ${comboboxTokens.targetFontStyle}: ${bodyS.fontStyle}; + ${comboboxTokens.targetFontWeight}: ${bodyS.fontWeight}; + ${comboboxTokens.targetLetterSpacing}: ${bodyS.letterSpacing}; + ${comboboxTokens.targetLineHeight}: ${bodyS.lineHeight}; + ${comboboxTokens.targetLabelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${comboboxTokens.targetLabelInnerFontSize}: ${bodyXXS.fontSize}; + ${comboboxTokens.targetLabelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${comboboxTokens.targetLabelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${comboboxTokens.targetLabelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${comboboxTokens.targetLabelInnerLineHeight}: ${bodyXXS.lineHeight}; `, m: css` ${comboboxTokens.width}: 100%; @@ -152,7 +171,7 @@ export const config = { ${comboboxTokens.paddingBottom}: 0.125rem; ${comboboxTokens.paddingLeft}: 0.125rem; - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerColor}: ${surfaceTransparentTertiary}; ${comboboxTokens.dividerHeight}: 0.063rem; ${comboboxTokens.dividerMarginTop}: 0; ${comboboxTokens.dividerMarginRight}: 0.875rem; @@ -167,12 +186,12 @@ export const config = { ${comboboxTokens.itemPaddingLeft}: 0.875rem; ${comboboxTokens.itemBorderRadius}: 0.625rem; ${comboboxTokens.itemContentLeftWidth}: 1.75rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${comboboxTokens.itemFontFamily}: ${bodyM.fontFamily}; + ${comboboxTokens.itemFontSize}: ${bodyM.fontSize}; + ${comboboxTokens.itemFontStyle}: ${bodyM.fontStyle}; + ${comboboxTokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${comboboxTokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${comboboxTokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${comboboxTokens.chipGap}: 0.25rem; ${comboboxTokens.chipBorderRadius}: 0.375rem; @@ -182,12 +201,12 @@ export const config = { ${comboboxTokens.chipClearContentMarginLeft}: 0.5rem; ${comboboxTokens.chipClearContentMarginRight}: 0rem; ${comboboxTokens.chipCloseIconSize}: 1rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${comboboxTokens.chipFontFamily}: ${bodyM.fontFamily}; + ${comboboxTokens.chipFontSize}: ${bodyM.fontSize}; + ${comboboxTokens.chipFontStyle}: ${bodyM.fontStyle}; + ${comboboxTokens.chipFontWeight}: ${bodyM.fontWeight}; + ${comboboxTokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${comboboxTokens.chipLineHeight}: ${bodyM.lineHeight}; ${comboboxTokens.targetArrowRight}: 0.875rem; ${comboboxTokens.targetHeight}: 3rem; @@ -198,18 +217,18 @@ export const config = { ${comboboxTokens.targetPaddingWithInput}: 0 3.375rem 0 0.625rem; ${comboboxTokens.targetInnerTop}: 0.5rem; ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-m-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${comboboxTokens.targetFontFamily}: ${bodyM.fontFamily}; + ${comboboxTokens.targetFontSize}: ${bodyM.fontSize}; + ${comboboxTokens.targetFontStyle}: ${bodyM.fontStyle}; + ${comboboxTokens.targetFontWeight}: ${bodyM.fontWeight}; + ${comboboxTokens.targetLetterSpacing}: ${bodyM.letterSpacing}; + ${comboboxTokens.targetLineHeight}: ${bodyM.lineHeight}; + ${comboboxTokens.targetLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${comboboxTokens.targetLabelInnerFontSize}: ${bodyXS.fontSize}; + ${comboboxTokens.targetLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${comboboxTokens.targetLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${comboboxTokens.targetLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${comboboxTokens.targetLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${comboboxTokens.width}: 100%; @@ -220,7 +239,7 @@ export const config = { ${comboboxTokens.paddingBottom}: 0.125rem; ${comboboxTokens.paddingLeft}: 0.125rem; - ${comboboxTokens.dividerColor}: var(--surface-transparent-tertiary); + ${comboboxTokens.dividerColor}: ${surfaceTransparentTertiary}; ${comboboxTokens.dividerHeight}: 0.063rem; ${comboboxTokens.dividerMarginTop}: 0; ${comboboxTokens.dividerMarginRight}: 1rem; @@ -235,12 +254,12 @@ export const config = { ${comboboxTokens.itemPaddingLeft}: 1rem; ${comboboxTokens.itemBorderRadius}: 0.75rem; ${comboboxTokens.itemContentLeftWidth}: 1.875rem; - ${comboboxTokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${comboboxTokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${comboboxTokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${comboboxTokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${comboboxTokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${comboboxTokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${comboboxTokens.itemFontFamily}: ${bodyL.fontFamily}; + ${comboboxTokens.itemFontSize}: ${bodyL.fontSize}; + ${comboboxTokens.itemFontStyle}: ${bodyL.fontStyle}; + ${comboboxTokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${comboboxTokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${comboboxTokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${comboboxTokens.chipGap}: 0.25rem; ${comboboxTokens.chipBorderRadius}: 0.5rem; @@ -250,12 +269,12 @@ export const config = { ${comboboxTokens.chipClearContentMarginLeft}: 0.625rem; ${comboboxTokens.chipClearContentMarginRight}: 0rem; ${comboboxTokens.chipCloseIconSize}: 1rem; - ${comboboxTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${comboboxTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${comboboxTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${comboboxTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${comboboxTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${comboboxTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${comboboxTokens.chipFontFamily}: ${bodyM.fontFamily}; + ${comboboxTokens.chipFontSize}: ${bodyM.fontSize}; + ${comboboxTokens.chipFontStyle}: ${bodyM.fontStyle}; + ${comboboxTokens.chipFontWeight}: ${bodyM.fontWeight}; + ${comboboxTokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${comboboxTokens.chipLineHeight}: ${bodyM.lineHeight}; ${comboboxTokens.targetArrowRight}: 1rem; ${comboboxTokens.targetHeight}: 3.5rem; @@ -266,54 +285,54 @@ export const config = { ${comboboxTokens.targetPaddingWithInput}: 0 3.625rem 0 0.625rem; ${comboboxTokens.targetInnerTop}: 0.5rem; ${comboboxTokens.targetLabelInnerTop}: 0.375rem; - ${comboboxTokens.targetFontFamily}: var(--plasma-typo-body-l-font-family); - ${comboboxTokens.targetFontSize}: var(--plasma-typo-body-l-font-size); - ${comboboxTokens.targetFontStyle}: var(--plasma-typo-body-l-font-style); - ${comboboxTokens.targetFontWeight}: var(--plasma-typo-body-l-font-weight); - ${comboboxTokens.targetLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${comboboxTokens.targetLineHeight}: var(--plasma-typo-body-l-line-height); - ${comboboxTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-s-font-family); - ${comboboxTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-s-font-size); - ${comboboxTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-s-font-style); - ${comboboxTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${comboboxTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${comboboxTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-s-line-height); + ${comboboxTokens.targetFontFamily}: ${bodyL.fontFamily}; + ${comboboxTokens.targetFontSize}: ${bodyL.fontSize}; + ${comboboxTokens.targetFontStyle}: ${bodyL.fontStyle}; + ${comboboxTokens.targetFontWeight}: ${bodyL.fontWeight}; + ${comboboxTokens.targetLetterSpacing}: ${bodyL.letterSpacing}; + ${comboboxTokens.targetLineHeight}: ${bodyL.lineHeight}; + ${comboboxTokens.targetLabelInnerFontFamily}: ${bodyS.fontFamily}; + ${comboboxTokens.targetLabelInnerFontSize}: ${bodyS.fontSize}; + ${comboboxTokens.targetLabelInnerFontStyle}: ${bodyS.fontStyle}; + ${comboboxTokens.targetLabelInnerFontWeight}: ${bodyS.fontWeight}; + ${comboboxTokens.targetLabelInnerLetterSpacing}: ${bodyS.letterSpacing}; + ${comboboxTokens.targetLabelInnerLineHeight}: ${bodyS.lineHeight}; `, }, view: { default: css` - ${comboboxTokens.targetColor}: var(--text-primary); - ${comboboxTokens.targetLabelColor}: var(--text-secondary); - ${comboboxTokens.targetArrowColor}: var(--text-secondary); - ${comboboxTokens.targetBorderColor}: var(--text-tertiary); - ${comboboxTokens.targetBorderColorHover}: var(--text-tertiary-hover); - ${comboboxTokens.targetBorderColorActive}: var(--text-tertiary-active); - ${comboboxTokens.targetBorderColorOpen}: var(--text-accent); + ${comboboxTokens.targetColor}: ${textPrimary}; + ${comboboxTokens.targetLabelColor}: ${textSecondary}; + ${comboboxTokens.targetArrowColor}: ${textSecondary}; + ${comboboxTokens.targetBorderColor}: ${textTertiary}; + ${comboboxTokens.targetBorderColorHover}: ${textTertiaryHover}; + ${comboboxTokens.targetBorderColorActive}: ${textTertiaryActive}; + ${comboboxTokens.targetBorderColorOpen}: ${textAccent}; - ${comboboxTokens.background}: var(--surface-solid-card-brightness); + ${comboboxTokens.background}: ${surfaceSolidCardBrightness}; ${comboboxTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); /* TODO: Забирать из токена --shadow-down-soft-s */ ${comboboxTokens.itemBackground}: transparent; - ${comboboxTokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${comboboxTokens.itemBackgroundSelectedHover}: var(--surface-transparent-secondary); - ${comboboxTokens.itemColor}: var(--text-primary); - ${comboboxTokens.itemContentLeftColor}: var(--text-accent); + ${comboboxTokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${comboboxTokens.itemBackgroundSelectedHover}: ${surfaceTransparentSecondary}; + ${comboboxTokens.itemColor}: ${textPrimary}; + ${comboboxTokens.itemContentLeftColor}: ${textAccent}; - ${comboboxTokens.chipCloseIconColor}: var(--text-secondary); - ${comboboxTokens.chipColor}: var(--text-primary); - ${comboboxTokens.chipBackground}: var(--surface-transparent-secondary); - ${comboboxTokens.chipColorHover}: var(--text-primary); - ${comboboxTokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${comboboxTokens.chipColorActive}: var(--text-primary); - ${comboboxTokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${comboboxTokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${comboboxTokens.chipColorReadOnly}: var(--text-primary); - ${comboboxTokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${comboboxTokens.chipColorReadOnlyHover}: var(--text-primary); + ${comboboxTokens.chipCloseIconColor}: ${textSecondary}; + ${comboboxTokens.chipColor}: ${textPrimary}; + ${comboboxTokens.chipBackground}: ${surfaceTransparentSecondary}; + ${comboboxTokens.chipColorHover}: ${textPrimary}; + ${comboboxTokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${comboboxTokens.chipColorActive}: ${textPrimary}; + ${comboboxTokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${comboboxTokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${comboboxTokens.chipColorReadOnly}: ${textPrimary}; + ${comboboxTokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${comboboxTokens.chipColorReadOnlyHover}: ${textPrimary}; ${comboboxTokens.chipOpacityReadonly}: 0.72; ${comboboxTokens.disabledOpacity}: 0.4; - ${comboboxTokens.focusColor}: var(--surface-accent); + ${comboboxTokens.focusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-web/src/components/Counter/Counter.config.ts b/packages/plasma-web/src/components/Counter/Counter.config.ts index d267bbc2fc4..2fe035d292a 100644 --- a/packages/plasma-web/src/components/Counter/Counter.config.ts +++ b/packages/plasma-web/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,40 +23,40 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, /** * @deprecated * использовать `default` */ primary: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -49,56 +64,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/plasma-web/src/components/DatePicker/DatePicker.clear.config.ts b/packages/plasma-web/src/components/DatePicker/DatePicker.clear.config.ts index c2e334a638a..fb594d5ccfc 100644 --- a/packages/plasma-web/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/plasma-web/src/components/DatePicker/DatePicker.clear.config.ts @@ -1,3 +1,46 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,64 +51,64 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); + ${tokens.outlineFocusColor}: ${surfaceAccent}; ${tokens.background}: transparent; ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.focusColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.focusColor}: ${textAccent}; ${tokens.textFieldBackgroundColor}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -74,76 +117,76 @@ export const config = { ${tokens.textFieldBackgroundSuccessColor}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -152,12 +195,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -167,12 +210,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -198,30 +241,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}:0.82rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; @@ -239,46 +282,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -289,25 +332,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -318,12 +361,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -333,12 +376,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -369,30 +412,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -410,46 +453,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -460,25 +503,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -489,12 +532,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -504,12 +547,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -540,30 +583,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -581,46 +624,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -631,25 +674,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -660,12 +703,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -675,12 +718,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -711,30 +754,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -752,46 +795,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -802,25 +845,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -831,12 +874,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -846,12 +889,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -882,30 +925,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -923,46 +966,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -973,25 +1016,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -1008,12 +1051,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1022,7 +1065,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1033,12 +1076,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1047,15 +1090,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1068,12 +1111,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1092,12 +1135,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1116,15 +1159,15 @@ export const config = { readOnly: { true: css` ${tokens.backgroundReadOnly}: transparent; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/plasma-web/src/components/DatePicker/DatePicker.config.ts b/packages/plasma-web/src/components/DatePicker/DatePicker.config.ts index abdedff9f80..499343cc4bd 100644 --- a/packages/plasma-web/src/components/DatePicker/DatePicker.config.ts +++ b/packages/plasma-web/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,112 +48,112 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-clear); - ${tokens.borderColor}: var(--surface-transparent-tertiary); - ${tokens.borderColorError}: var(--surface-negative); - ${tokens.borderColorSuccess}: var(--surface-positive); - ${tokens.borderColorHover}: var(--text-secondary); - ${tokens.borderColorFocus}: var(--surface-accent); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); - ${tokens.textFieldBorderColorError}: var(--surface-negative); - ${tokens.textFieldBorderColorErrorFocus}: var(--surface-accent); - ${tokens.textFieldBorderColorSuccess}: var(--surface-positive); - ${tokens.textFieldBorderColorSuccessFocus}: var(--surface-accent); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceClear}; + ${tokens.borderColor}: ${surfaceTransparentTertiary}; + ${tokens.borderColorError}: ${surfaceNegative}; + ${tokens.borderColorSuccess}: ${surfacePositive}; + ${tokens.borderColorHover}: ${textSecondary}; + ${tokens.borderColorFocus}: ${surfaceAccent}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; + ${tokens.textFieldBorderColorError}: ${surfaceNegative}; + ${tokens.textFieldBorderColorErrorFocus}: ${surfaceAccent}; + ${tokens.textFieldBorderColorSuccess}: ${surfacePositive}; + ${tokens.textFieldBorderColorSuccessFocus}: ${surfaceAccent}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -123,12 +163,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -138,12 +178,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 4rem; @@ -172,31 +212,31 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -214,46 +254,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -264,25 +304,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -294,12 +334,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -309,12 +349,12 @@ export const config = { ${tokens.labelOffset}: 0.75rem; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -344,31 +384,31 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -386,46 +426,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -436,25 +476,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -466,12 +506,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -481,12 +521,12 @@ export const config = { ${tokens.labelOffset}: 0.625rem; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -516,31 +556,31 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -558,46 +598,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -608,25 +648,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -638,12 +678,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.375rem 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -653,12 +693,12 @@ export const config = { ${tokens.labelOffset}: 0.5rem; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -688,31 +728,31 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -730,46 +770,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -780,25 +820,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -810,12 +850,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -825,12 +865,12 @@ export const config = { ${tokens.labelOffset}: 0.375rem; ${tokens.labelWrapperOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -860,31 +900,31 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -902,46 +942,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -952,25 +992,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -987,12 +1027,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1001,7 +1041,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1012,12 +1052,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1026,15 +1066,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1047,12 +1087,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1071,12 +1111,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1094,19 +1134,19 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-clear); - ${tokens.borderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceClear}; + ${tokens.borderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-clear); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceClear}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/plasma-web/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/plasma-web/src/components/DateTimePicker/DateTimePicker.config.ts index 3eb5ca491dd..8c96538b64a 100644 --- a/packages/plasma-web/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/plasma-web/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,41 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,93 +48,93 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldBorderColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldBorderColorHover}: var(--text-secondary); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); - ${tokens.textFieldBorderColorError}: var(--surface-negative); - ${tokens.textFieldBorderColorErrorFocus}: var(--surface-accent); - ${tokens.textFieldBorderColorSuccess}: var(--surface-positive); - ${tokens.textFieldBorderColorSuccessFocus}: var(--surface-accent); - - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldBorderColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldBorderColorHover}: ${textSecondary}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; + ${tokens.textFieldBorderColorError}: ${surfaceNegative}; + ${tokens.textFieldBorderColorErrorFocus}: ${surfaceAccent}; + ${tokens.textFieldBorderColorSuccess}: ${surfacePositive}; + ${tokens.textFieldBorderColorSuccessFocus}: ${surfaceAccent}; + + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -116,30 +154,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -149,12 +187,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -171,46 +209,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.875rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.875rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.875rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -221,13 +259,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; @@ -240,21 +278,21 @@ export const config = { ${tokens.timePickerItemHeight}: 4rem; ${tokens.timePickerItemBorderRadius}: 0.875rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -276,30 +314,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -309,12 +347,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -331,46 +369,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -381,13 +419,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; @@ -400,21 +438,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3.5rem; ${tokens.timePickerItemBorderRadius}: 0.75rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -436,30 +474,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -469,12 +507,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -491,46 +529,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -541,13 +579,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; @@ -560,21 +598,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3rem; ${tokens.timePickerItemBorderRadius}: 0.625rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyM.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyM.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyM.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -596,30 +634,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -629,12 +667,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -651,46 +689,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -701,13 +739,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -720,21 +758,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -756,30 +794,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -789,12 +827,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -811,46 +849,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -861,13 +899,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -880,21 +918,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -969,12 +1007,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -983,7 +1021,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -994,12 +1032,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1008,7 +1046,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -1018,13 +1056,13 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-clear); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceClear}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 1; diff --git a/packages/plasma-web/src/components/Divider/Divider.config.ts b/packages/plasma-web/src/components/Divider/Divider.config.ts index df0449d5c06..1fe05873052 100644 --- a/packages/plasma-web/src/components/Divider/Divider.config.ts +++ b/packages/plasma-web/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/plasma-web/src/components/Drawer/Drawer.config.ts b/packages/plasma-web/src/components/Drawer/Drawer.config.ts index b0b00b15040..d727a2cf681 100644 --- a/packages/plasma-web/src/components/Drawer/Drawer.config.ts +++ b/packages/plasma-web/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/plasma-web/src/components/Dropdown/Dropdown.config.ts b/packages/plasma-web/src/components/Dropdown/Dropdown.config.ts index f14dd28fbd7..e2aed5d9fb4 100644 --- a/packages/plasma-web/src/components/Dropdown/Dropdown.config.ts +++ b/packages/plasma-web/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,11 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -24,12 +32,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.5rem; ${tokens.dividerMarginBottomTight}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -37,12 +45,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.padding}: 0.125rem; @@ -61,12 +69,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -74,12 +82,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.padding}: 0.125rem; @@ -98,12 +106,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -111,12 +119,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 0.125rem; @@ -135,12 +143,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -148,12 +156,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.padding}: 0.125rem; @@ -172,12 +180,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.125rem; ${tokens.dividerMarginBottomTight}: 0.125rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -185,18 +193,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/plasma-web/src/components/Dropdown/components/DropdownOld.config.ts b/packages/plasma-web/src/components/Dropdown/components/DropdownOld.config.ts index 74bd9644d57..e15fd5aa28a 100644 --- a/packages/plasma-web/src/components/Dropdown/components/DropdownOld.config.ts +++ b/packages/plasma-web/src/components/Dropdown/components/DropdownOld.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceSolidCardBrightness, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, dropdownOldTokens as dropdownTokens } from '@salutejs/plasma-new-hope/styled-components'; const dropdownSizeCommon = ` @@ -36,12 +45,12 @@ export const config = { ${dropdownTokens.itemPaddingLeft}: 0.5rem; ${dropdownTokens.itemBorderRadius}: 0.375rem; - ${dropdownTokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${dropdownTokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${dropdownTokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${dropdownTokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${dropdownTokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${dropdownTokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${dropdownTokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${dropdownTokens.itemFontSize}: ${bodyXS.fontSize}; + ${dropdownTokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${dropdownTokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${dropdownTokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${dropdownTokens.itemFontLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${dropdownSizeCommon}; @@ -53,12 +62,12 @@ export const config = { ${dropdownTokens.itemPaddingLeft}: 0.75rem; ${dropdownTokens.itemBorderRadius}: 0.5rem; - ${dropdownTokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropdownTokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${dropdownTokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropdownTokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${dropdownTokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropdownTokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropdownTokens.itemFontFamily}: ${bodyS.fontFamily}; + ${dropdownTokens.itemFontSize}: ${bodyS.fontSize}; + ${dropdownTokens.itemFontStyle}: ${bodyS.fontStyle}; + ${dropdownTokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${dropdownTokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${dropdownTokens.itemFontLineHeight}: ${bodyS.lineHeight}; `, m: css` ${dropdownSizeCommon}; @@ -70,12 +79,12 @@ export const config = { ${dropdownTokens.itemPaddingLeft}: 0.875rem; ${dropdownTokens.itemBorderRadius}: 0.625rem; - ${dropdownTokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${dropdownTokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${dropdownTokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${dropdownTokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${dropdownTokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${dropdownTokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${dropdownTokens.itemFontFamily}: ${bodyM.fontFamily}; + ${dropdownTokens.itemFontSize}: ${bodyM.fontSize}; + ${dropdownTokens.itemFontStyle}: ${bodyM.fontStyle}; + ${dropdownTokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${dropdownTokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${dropdownTokens.itemFontLineHeight}: ${bodyM.lineHeight}; `, l: css` ${dropdownSizeCommon}; @@ -87,28 +96,28 @@ export const config = { ${dropdownTokens.itemPaddingLeft}: 1rem; ${dropdownTokens.itemBorderRadius}: 0.75rem; - ${dropdownTokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${dropdownTokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${dropdownTokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${dropdownTokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${dropdownTokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${dropdownTokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${dropdownTokens.itemFontFamily}: ${bodyL.fontFamily}; + ${dropdownTokens.itemFontSize}: ${bodyL.fontSize}; + ${dropdownTokens.itemFontStyle}: ${bodyL.fontStyle}; + ${dropdownTokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${dropdownTokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${dropdownTokens.itemFontLineHeight}: ${bodyL.lineHeight}; `, }, view: { default: css` ${dropdownTokens.disabledOpacity}: 0.4; - ${dropdownTokens.background}: var(--surface-solid-card-brightness); + ${dropdownTokens.background}: ${surfaceSolidCardBrightness}; // TODO: #1131 Вернуть токен --shadow-down-soft-s ${dropdownTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${dropdownTokens.itemBackground}: transparent; - ${dropdownTokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${dropdownTokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${dropdownTokens.itemBackgroundSelected}: inherit; ${dropdownTokens.itemColorSelected}: inherit; ${dropdownTokens.itemBackgroundSelectedHover}: inherit; ${dropdownTokens.itemColorSelectedHover}: inherit; - ${dropdownTokens.itemColor}: var(--text-primary); + ${dropdownTokens.itemColor}: ${textPrimary}; `, }, }, diff --git a/packages/plasma-web/src/components/Dropzone/Dropzone.config.ts b/packages/plasma-web/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..a942e41d4de 100644 --- a/packages/plasma-web/src/components/Dropzone/Dropzone.config.ts +++ b/packages/plasma-web/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-web/src/components/Editable/Editable.config.ts b/packages/plasma-web/src/components/Editable/Editable.config.ts index b6dbf7f60a1..1b30dcce7d2 100644 --- a/packages/plasma-web/src/components/Editable/Editable.config.ts +++ b/packages/plasma-web/src/components/Editable/Editable.config.ts @@ -1,3 +1,10 @@ +import { + backgroundPrimary, + textAccent, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, editableTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +15,11 @@ export const config = { variations: { view: { default: css` - ${editableTokens.editButtonBackground}: var(--background-primary); - ${editableTokens.editButtonColor}: var(--text-tertiary); - ${editableTokens.editButtonColorHover}: var(--text-primary); - ${editableTokens.placeholderColor}: var(--text-secondary); - ${editableTokens.caretColor}: var(--text-accent); + ${editableTokens.editButtonBackground}: ${backgroundPrimary}; + ${editableTokens.editButtonColor}: ${textTertiary}; + ${editableTokens.editButtonColorHover}: ${textPrimary}; + ${editableTokens.placeholderColor}: ${textSecondary}; + ${editableTokens.caretColor}: ${textAccent}; `, }, size: { diff --git a/packages/plasma-web/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/plasma-web/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..bee73460915 100644 --- a/packages/plasma-web/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/plasma-web/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-web/src/components/EmptyState/EmptyState.config.ts b/packages/plasma-web/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..3f92a73708a 100644 --- a/packages/plasma-web/src/components/EmptyState/EmptyState.config.ts +++ b/packages/plasma-web/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-web/src/components/File/File.config.ts b/packages/plasma-web/src/components/File/File.config.ts index 455a87f891b..274ea45c93c 100644 --- a/packages/plasma-web/src/components/File/File.config.ts +++ b/packages/plasma-web/src/components/File/File.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, fileTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +24,36 @@ export const config = { variations: { view: { default: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-secondary); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textSecondary}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-solid-default); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; `, negative: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-negative); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textNegative}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-negative); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceNegative}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-negative); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceNegative}; `, }, size: { @@ -52,19 +68,19 @@ export const config = { ${tokens.cellGap}: 0.75rem; ${tokens.cellPaddingRightContent}: 0.75rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -94,19 +110,19 @@ export const config = { ${tokens.cellGap}: 0.625rem; ${tokens.cellPaddingRightContent}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -136,19 +152,19 @@ export const config = { ${tokens.cellGap}: 0.5rem; ${tokens.cellPaddingRightContent}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -178,19 +194,19 @@ export const config = { ${tokens.cellGap}: 0.375rem; ${tokens.cellPaddingRightContent}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 24; ${tokens.progressBarCircularHeight}: 1.5rem; diff --git a/packages/plasma-web/src/components/IconButton/IconButton.config.ts b/packages/plasma-web/src/components/IconButton/IconButton.config.ts index 9d760c4f3f2..991e87ecf71 100644 --- a/packages/plasma-web/src/components/IconButton/IconButton.config.ts +++ b/packages/plasma-web/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,74 +49,74 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -85,12 +125,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 4rem; ${iconButtonTokens.iconButtonPadding}: 1.75rem; ${iconButtonTokens.iconButtonRadius}: 1rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -100,12 +140,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3.5rem; ${iconButtonTokens.iconButtonPadding}: 1.5rem; ${iconButtonTokens.iconButtonRadius}: 0.875rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -115,12 +155,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -130,12 +170,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -145,12 +185,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -163,7 +203,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-web/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/plasma-web/src/components/InformationWrapper/InformationWrapper.config.ts index 45b90809f49..f2b65851f8b 100644 --- a/packages/plasma-web/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/plasma-web/src/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,18 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,50 +23,50 @@ export const config = { variations: { view: { default: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { l: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; @@ -63,29 +78,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -95,12 +110,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, m: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; @@ -112,29 +127,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -144,12 +159,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, s: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -161,29 +176,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -193,12 +208,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, xs: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; @@ -210,29 +225,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -244,10 +259,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -260,12 +275,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -284,12 +299,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; diff --git a/packages/plasma-web/src/components/LinkButton/LinkButton.config.ts b/packages/plasma-web/src/components/LinkButton/LinkButton.config.ts index 65d6cd4557f..b12b9da8306 100644 --- a/packages/plasma-web/src/components/LinkButton/LinkButton.config.ts +++ b/packages/plasma-web/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +38,70 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, }, size: { @@ -79,12 +109,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 4rem; ${linkButtonTokens.linkButtonPadding}: 1.25rem 0; ${linkButtonTokens.linkButtonRadius}: 1rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.5rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -98,12 +128,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3.5rem; ${linkButtonTokens.linkButtonPadding}: 1rem 0; ${linkButtonTokens.linkButtonRadius}: 0.875rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -117,12 +147,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -136,12 +166,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -155,12 +185,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -174,12 +204,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 1.5rem; ${linkButtonTokens.linkButtonPadding}: 0.375rem 0; ${linkButtonTokens.linkButtonRadius}: 0.375rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 0.75rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/plasma-web/src/components/List/List.config.ts b/packages/plasma-web/src/components/List/List.config.ts index b0a7acc37b0..8ef5640e37b 100644 --- a/packages/plasma-web/src/components/List/List.config.ts +++ b/packages/plasma-web/src/components/List/List.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +17,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +38,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${listTokens.listItemFontFamily}: ${bodyXS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyXS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyXS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyXS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${listTokens.listItemPaddingTop}: 0.689rem; @@ -46,12 +55,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -63,12 +72,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -80,12 +89,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, xl: css` ${listTokens.listItemPaddingTop}: 1.3125rem; @@ -97,12 +106,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-web/src/components/Loader/Loader.config.ts b/packages/plasma-web/src/components/Loader/Loader.config.ts index 25fef650be1..03cc77c7adb 100644 --- a/packages/plasma-web/src/components/Loader/Loader.config.ts +++ b/packages/plasma-web/src/components/Loader/Loader.config.ts @@ -1,3 +1,30 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + overlaySoft, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, loaderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +35,67 @@ export const config = { variations: { view: { default: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-solid-default); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceSolidDefault}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-primary); + ${loaderTokens.spinnerColor}: ${textPrimary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, secondary: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceTransparentSecondary}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-secondary); + ${loaderTokens.spinnerColor}: ${textSecondary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, accent: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-accent); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceAccent}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-accent); + ${loaderTokens.spinnerColor}: ${textAccent}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, positive: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-positive); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfacePositive}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-positive); + ${loaderTokens.spinnerColor}: ${textPositive}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, warning: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-warning); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceWarning}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-warning); + ${loaderTokens.spinnerColor}: ${textWarning}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, negative: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-negative); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceNegative}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-negative); + ${loaderTokens.spinnerColor}: ${textNegative}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, info: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-info); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceInfo}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-info); + ${loaderTokens.spinnerColor}: ${textInfo}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, }, size: { @@ -81,12 +108,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 8rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h2.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h2.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h2.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h2Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h2.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h2.lineHeight}; ${loaderTokens.spinnerSize}: 8rem; `, @@ -99,12 +126,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 5.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h5.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h5.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h5.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h5Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h5.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h5.lineHeight}; ${loaderTokens.spinnerSize}: 5.5rem; `, @@ -117,12 +144,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyL.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyL.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyL.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyL.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyL.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyL.lineHeight}; ${loaderTokens.spinnerSize}: 3.5rem; `, @@ -135,12 +162,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyM.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyM.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyM.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyM.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyM.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyM.lineHeight}; ${loaderTokens.spinnerSize}: 3rem; `, @@ -153,12 +180,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 2.25rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyS.lineHeight}; ${loaderTokens.spinnerSize}: 2.25rem; `, @@ -171,12 +198,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXS.lineHeight}; ${loaderTokens.spinnerSize}: 1.5rem; `, @@ -189,12 +216,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXXS.lineHeight}; ${loaderTokens.spinnerSize}: 1rem; `, diff --git a/packages/plasma-web/src/components/ModalBase/Modal.config.ts b/packages/plasma-web/src/components/ModalBase/Modal.config.ts index 8b107b98ea3..608b1d064cc 100644 --- a/packages/plasma-web/src/components/ModalBase/Modal.config.ts +++ b/packages/plasma-web/src/components/ModalBase/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,16 +16,16 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-web/src/components/NavigationDrawer/NavigationDrawer.config.ts b/packages/plasma-web/src/components/NavigationDrawer/NavigationDrawer.config.ts index d36ca2a2d57..4f98638b814 100644 --- a/packages/plasma-web/src/components/NavigationDrawer/NavigationDrawer.config.ts +++ b/packages/plasma-web/src/components/NavigationDrawer/NavigationDrawer.config.ts @@ -1,3 +1,15 @@ +import { + bodyM, + bodyS, + bodyXXS, + shadowDownSoftS, + surfaceSolidCard, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textTertiaryActive, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, navigationDrawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,41 +20,41 @@ export const config = { variations: { view: { default: css` - ${navigationDrawerTokens.sidebarBoxShadow}: var(--shadow-down-soft-s); + ${navigationDrawerTokens.sidebarBoxShadow}: ${shadowDownSoftS}; ${navigationDrawerTokens.sidebarPadding}: 1.25rem 0.75rem 0.75rem 0.75rem; ${navigationDrawerTokens.sidebarGap}: 0.625rem; ${navigationDrawerTokens.sidebarWidth}: 250px; - ${navigationDrawerTokens.sidebarBackground}: var(--surface-solid-card); + ${navigationDrawerTokens.sidebarBackground}: ${surfaceSolidCard}; - ${navigationDrawerTokens.sectionColor}: var(--text-tertiary-active); + ${navigationDrawerTokens.sectionColor}: ${textTertiaryActive}; ${navigationDrawerTokens.sectionFontSize}: 0.75rem; ${navigationDrawerTokens.sectionHeaderGap}: 0.75rem; ${navigationDrawerTokens.menuItemGap}: 0.75rem; ${navigationDrawerTokens.menuItemPadding}: 0.75rem; ${navigationDrawerTokens.menuItemBorderRadius}: 0.625rem; - ${navigationDrawerTokens.menuItemSelectedColor}: var(--surface-transparent-secondary); - ${navigationDrawerTokens.menuItemHoverColor}: var(--surface-transparent-secondary-hover); + ${navigationDrawerTokens.menuItemSelectedColor}: ${surfaceTransparentSecondary}; + ${navigationDrawerTokens.menuItemHoverColor}: ${surfaceTransparentSecondaryHover}; ${navigationDrawerTokens.menuItemDisabledOpacity}: 0.4; ${navigationDrawerTokens.menuItemIndicatorSize}: 0.5rem; - ${navigationDrawerTokens.menuItemIndicatorColor}: var(--surface-solid-default); + ${navigationDrawerTokens.menuItemIndicatorColor}: ${surfaceSolidDefault}; - ${navigationDrawerTokens.dividerColor}: var(--surface-transparent-tertiary); + ${navigationDrawerTokens.dividerColor}: ${surfaceTransparentTertiary}; ${navigationDrawerTokens.dividerHeight}: 1px; - ${navigationDrawerTokens.overlayBackground}: var(--surface-transparent-secondary); + ${navigationDrawerTokens.overlayBackground}: ${surfaceTransparentSecondary}; ${navigationDrawerTokens.counterBorderRadius}: 1rem; ${navigationDrawerTokens.counterHeight}: 1rem; ${navigationDrawerTokens.counterPadding}: 0 0.125rem; - ${navigationDrawerTokens.counterBackground}: var(--surface-solid-default); - ${navigationDrawerTokens.counterColor}: var(--surface-solid-card); - ${navigationDrawerTokens.counterFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${navigationDrawerTokens.counterFontSize}: var(--plasma-typo-body-xxs-font-size); - ${navigationDrawerTokens.counterFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${navigationDrawerTokens.counterFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${navigationDrawerTokens.counterLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${navigationDrawerTokens.counterLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${navigationDrawerTokens.counterBackground}: ${surfaceSolidDefault}; + ${navigationDrawerTokens.counterColor}: ${surfaceSolidCard}; + ${navigationDrawerTokens.counterFontFamily}: ${bodyXXS.fontFamily}; + ${navigationDrawerTokens.counterFontSize}: ${bodyXXS.fontSize}; + ${navigationDrawerTokens.counterFontStyle}: ${bodyXXS.fontStyle}; + ${navigationDrawerTokens.counterFontWeight}: ${bodyXXS.fontWeight}; + ${navigationDrawerTokens.counterLetterSpacing}: ${bodyXXS.letterSpacing}; + ${navigationDrawerTokens.counterLineHeight}: ${bodyXXS.lineHeight}; `, }, size: { @@ -54,11 +66,11 @@ export const config = { ${navigationDrawerTokens.sectionPadding}: 0.625rem 0.75rem; ${navigationDrawerTokens.sectionBorderRadius}: 0.625rem; ${navigationDrawerTokens.iconMargin}: 1px 0 0 1px; - ${navigationDrawerTokens.menuItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${navigationDrawerTokens.menuItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${navigationDrawerTokens.menuItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${navigationDrawerTokens.menuItemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${navigationDrawerTokens.menuItemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${navigationDrawerTokens.menuItemFontFamily}: ${bodyS.fontFamily}; + ${navigationDrawerTokens.menuItemFontStyle}: ${bodyS.fontStyle}; + ${navigationDrawerTokens.menuItemFontWeight}: ${bodyS.fontWeight}; + ${navigationDrawerTokens.menuItemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${navigationDrawerTokens.menuItemFontLineHeight}: ${bodyS.lineHeight}; ${navigationDrawerTokens.menuItemContentLeftSize}: 1.5rem; ${navigationDrawerTokens.menuItemContentLeftMargin}: 0.5rem; `, @@ -70,11 +82,11 @@ export const config = { ${navigationDrawerTokens.sectionPadding}: 0.75rem; ${navigationDrawerTokens.sectionBorderRadius}: 0.75rem; ${navigationDrawerTokens.iconMargin}: 2px 0 0 2px; - ${navigationDrawerTokens.menuItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${navigationDrawerTokens.menuItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${navigationDrawerTokens.menuItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${navigationDrawerTokens.menuItemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${navigationDrawerTokens.menuItemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${navigationDrawerTokens.menuItemFontFamily}: ${bodyM.fontFamily}; + ${navigationDrawerTokens.menuItemFontStyle}: ${bodyM.fontStyle}; + ${navigationDrawerTokens.menuItemFontWeight}: ${bodyM.fontWeight}; + ${navigationDrawerTokens.menuItemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${navigationDrawerTokens.menuItemFontLineHeight}: ${bodyM.lineHeight}; ${navigationDrawerTokens.menuItemContentLeftSize}: 2.25rem; ${navigationDrawerTokens.menuItemContentLeftMargin}: 0.375rem; `, diff --git a/packages/plasma-web/src/components/Note/Note.config.ts b/packages/plasma-web/src/components/Note/Note.config.ts index 76e6e79ff13..dfd7c3b67de 100644 --- a/packages/plasma-web/src/components/Note/Note.config.ts +++ b/packages/plasma-web/src/components/Note/Note.config.ts @@ -1,3 +1,25 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textL, + textLBold, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textSecondary, + textSecondaryHover, + textWarning, + textXS, + textXSBold, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +30,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -44,8 +66,8 @@ export const config = { ${tokens.closeIconTop}: 1rem; ${tokens.closeIconRight}: 1rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -53,20 +75,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 2rem; ${tokens.fixedContentBeforePadding}: 0.25rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.titleFontFamily}: ${textL.fontFamily}; + ${tokens.titleFontSize}: ${textL.fontSize}; + ${tokens.titleFontStyle}: ${textL.fontStyle}; + ${tokens.titleFontWeight}: ${textLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textL.letterSpacing}; + ${tokens.titleLineHeight}: ${textL.lineHeight}; ${tokens.titlePaddingRight}: 1.875rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.textFontFamily}: ${textL.fontFamily}; + ${tokens.textFontSize}: ${textL.fontSize}; + ${tokens.textFontStyle}: ${textL.fontStyle}; + ${tokens.textFontWeight}: ${textL.fontWeight}; + ${tokens.textLetterSpacing}: ${textL.letterSpacing}; + ${tokens.textLineHeight}: ${textL.lineHeight}; `, m: css` ${tokens.padding}: 1.25rem 1.5rem; @@ -78,8 +100,8 @@ export const config = { ${tokens.closeIconTop}: 0.75rem; ${tokens.closeIconRight}: 0.75rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -87,20 +109,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; ${tokens.titlePaddingRight}: 1.75rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -112,8 +134,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -121,20 +143,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.titleFontFamily}: ${textS.fontFamily}; + ${tokens.titleFontSize}: ${textS.fontSize}; + ${tokens.titleFontStyle}: ${textS.fontStyle}; + ${tokens.titleFontWeight}: ${textSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; + ${tokens.titleLineHeight}: ${textS.lineHeight}; ${tokens.titlePaddingRight}: 1.625rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.textFontFamily}: ${textS.fontFamily}; + ${tokens.textFontSize}: ${textS.fontSize}; + ${tokens.textFontStyle}: ${textS.fontStyle}; + ${tokens.textFontWeight}: ${textS.fontWeight}; + ${tokens.textLetterSpacing}: ${textS.letterSpacing}; + ${tokens.textLineHeight}: ${textS.lineHeight}; `, xs: css` ${tokens.padding}: 0.75rem 1rem; @@ -146,8 +168,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1rem; ${tokens.closeIconButtonSize}: 1rem; @@ -155,20 +177,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.titleFontFamily}: ${textXS.fontFamily}; + ${tokens.titleFontSize}: ${textXS.fontSize}; + ${tokens.titleFontStyle}: ${textXS.fontStyle}; + ${tokens.titleFontWeight}: ${textXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.titleLineHeight}: ${textXS.lineHeight}; ${tokens.titlePaddingRight}: 1.5rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.textFontFamily}: ${textXS.fontFamily}; + ${tokens.textFontSize}: ${textXS.fontSize}; + ${tokens.textFontStyle}: ${textXS.fontStyle}; + ${tokens.textFontWeight}: ${textXS.fontWeight}; + ${tokens.textLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.textLineHeight}: ${textXS.lineHeight}; `, }, }, diff --git a/packages/plasma-web/src/components/Notification/Notification.config.ts b/packages/plasma-web/src/components/Notification/Notification.config.ts index 8cd0bf93acc..d7af88c9ec0 100644 --- a/packages/plasma-web/src/components/Notification/Notification.config.ts +++ b/packages/plasma-web/src/components/Notification/Notification.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + bodySBold, + surfaceSolidCardBrightness, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +21,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-solid-card-brightness); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceSolidCardBrightness}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +53,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +107,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +161,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +215,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +269,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/plasma-web/src/components/NumberInput/NumberInput.config.ts b/packages/plasma-web/src/components/NumberInput/NumberInput.config.ts index 8eec947c9df..88d2ddea9da 100644 --- a/packages/plasma-web/src/components/NumberInput/NumberInput.config.ts +++ b/packages/plasma-web/src/components/NumberInput/NumberInput.config.ts @@ -1,3 +1,36 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextTertiary, + lightBackgroundPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,26 +43,26 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.borderErrorColor}: var(--surface-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.borderColorFocus}: var(--surface-accent); - ${tokens.borderColorSolidFocus}: var(--surface-accent); - ${tokens.backgroundColorSolid}: var(--surface-solid-default); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.borderErrorColor}: ${surfaceNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.borderColorFocus}: ${surfaceAccent}; + ${tokens.borderColorSolidFocus}: ${surfaceAccent}; + ${tokens.backgroundColorSolid}: ${surfaceSolidDefault}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -37,26 +70,26 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, secondary: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.borderErrorColor}: var(--surface-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.borderColorFocus}: var(--surface-accent); - ${tokens.borderColorSolidFocus}: var(--surface-accent); - ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.iconButtonColorSolidActive}: var(--text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.borderErrorColor}: ${surfaceNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.borderColorFocus}: ${surfaceAccent}; + ${tokens.borderColorSolidFocus}: ${surfaceAccent}; + ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -64,27 +97,27 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, accent: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--inverse-text-primary); - ${tokens.errorColor}: var(--text-negative); - ${tokens.borderErrorColor}: var(--surface-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.borderColorFocus}: var(--surface-accent); - ${tokens.borderColorSolidFocus}: var(--light-background-primary); - ${tokens.backgroundColorSolid}: var(--surface-accent); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-accent); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${inverseTextPrimary}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.borderErrorColor}: ${surfaceNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.borderColorFocus}: ${surfaceAccent}; + ${tokens.borderColorSolidFocus}: ${lightBackgroundPrimary}; + ${tokens.backgroundColorSolid}: ${surfaceAccent}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -92,25 +125,25 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, clear: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.borderErrorColor}: var(--surface-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.borderColorFocus}: var(--surface-accent); - ${tokens.borderColorSolidFocus}: var(--surface-accent); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.borderErrorColor}: ${surfaceNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.borderColorFocus}: ${surfaceAccent}; + ${tokens.borderColorSolidFocus}: ${surfaceAccent}; ${tokens.backgroundColorSolid}: transparent; - ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonColor}: ${textPrimary}; ${tokens.iconButtonBackgroundColor}: transparent; - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; ${tokens.iconButtonBackgroundColorHover}: transparent; - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; ${tokens.iconButtonBackgroundColorActive}: transparent; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -125,12 +158,12 @@ export const config = { ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${tokens.iconButtonRadius}: 0.875rem; ${tokens.iconButtonSegmentationRadius}: 0.375rem; @@ -141,12 +174,12 @@ export const config = { ${tokens.inputWrapperBorderWidth}: 0.063rem; ${tokens.textWrapperPadding}: 1.063rem 1.125rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -158,12 +191,12 @@ export const config = { ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -174,12 +207,12 @@ export const config = { ${tokens.inputWrapperBorderWidth}: 0.063rem; ${tokens.textWrapperPadding}: 0.875rem 1rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -191,12 +224,12 @@ export const config = { ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 1rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.625rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -207,12 +240,12 @@ export const config = { ${tokens.inputWrapperBorderWidth}: 0.063rem; ${tokens.textWrapperPadding}: 0.688rem 0.875rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -224,12 +257,12 @@ export const config = { ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.75rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${tokens.iconButtonRadius}: 0.5rem; ${tokens.iconButtonSegmentationRadius}: 0.125rem; @@ -240,12 +273,12 @@ export const config = { ${tokens.inputWrapperBorderWidth}: 0.063rem; ${tokens.textWrapperPadding}: 0.563rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -261,8 +294,8 @@ export const config = { }, inputBackgroundType: { fill: css` - ${tokens.borderColor}: var(--surface-transparent-tertiary); - ${tokens.borderColorHover}: var(--text-secondary); + ${tokens.borderColor}: ${surfaceTransparentTertiary}; + ${tokens.borderColorHover}: ${textSecondary}; `, clear: css` ${tokens.borderColor}: transparent; diff --git a/packages/plasma-web/src/components/Pagination/Pagination.config.ts b/packages/plasma-web/src/components/Pagination/Pagination.config.ts index 05e6947e9f0..e56f4f13e15 100644 --- a/packages/plasma-web/src/components/Pagination/Pagination.config.ts +++ b/packages/plasma-web/src/components/Pagination/Pagination.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,180 +39,180 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-clear); - ${paginationTokens.inputBorderColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceClear}; + ${paginationTokens.inputBorderColor}: ${surfaceTransparentSecondary}; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-clear); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); - ${paginationTokens.inputBorderColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceClear}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary}; + ${paginationTokens.inputBorderColor}: ${surfaceTransparentSecondary}; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-clear); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); - ${paginationTokens.inputBorderColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceClear}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; + ${paginationTokens.inputBorderColor}: ${surfaceTransparentSecondary}; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, /** * @deprecated * использовать `default` */ primary: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.inputBackgroundColor}: var(--surface-clear); - ${paginationTokens.inputBorderColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceClear}; + ${paginationTokens.inputBorderColor}: ${surfaceTransparentSecondary}; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, /** * @deprecated * использовать `default` */ primary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, }, size: { l: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-l-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-l-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-l-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-l-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyL.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyL.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyL.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyLBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyL.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyL.lineHeight}; ${paginationTokens.buttonHeight}: 3.5rem; ${paginationTokens.buttonWidth}: 3rem; @@ -218,12 +248,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, m: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; @@ -259,12 +289,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; @@ -300,12 +330,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, xs: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-xs-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-xs-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-xs-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyXS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyXS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyXS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyXSBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyXS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyXS.lineHeight}; ${paginationTokens.buttonHeight}: 2rem; ${paginationTokens.paginationInputWidth}: 2.5rem; diff --git a/packages/plasma-web/src/components/Popover/Popover.config.ts b/packages/plasma-web/src/components/Popover/Popover.config.ts index 2f9acaf14e8..bb735f27c40 100644 --- a/packages/plasma-web/src/components/Popover/Popover.config.ts +++ b/packages/plasma-web/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/plasma-web/src/components/Progress/Progress.config.ts b/packages/plasma-web/src/components/Progress/Progress.config.ts index c81cf38a298..0ec54ed9553 100644 --- a/packages/plasma-web/src/components/Progress/Progress.config.ts +++ b/packages/plasma-web/src/components/Progress/Progress.config.ts @@ -1,3 +1,15 @@ +import { + surfaceAccent, + surfaceAccentGradient, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,44 +20,44 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, primary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, info: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-info); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceInfo}; + ${progressTokens.valueColor}: ${textTertiary}; `, success: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, error: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/plasma-web/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/plasma-web/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index 6a6449f99a4..e08c4f8528d 100644 --- a/packages/plasma-web/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/plasma-web/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +70,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -63,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -76,12 +96,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -89,12 +109,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -102,12 +122,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -115,12 +135,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -128,12 +148,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/plasma-web/src/components/Radiobox/Radiobox.config.ts b/packages/plasma-web/src/components/Radiobox/Radiobox.config.ts index fedc5b71afa..0dda0cc6dfc 100644 --- a/packages/plasma-web/src/components/Radiobox/Radiobox.config.ts +++ b/packages/plasma-web/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,18 +37,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,18 +60,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${radioboxTokens.margin}: 0; @@ -66,19 +82,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.625rem; ${radioboxTokens.contentTopOffset}: 0.0625rem; ${radioboxTokens.contentLeftOffset}: 0.75rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyL.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -86,83 +102,83 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${radioboxTokens.fillColor}: var(--text-primary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPrimary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated primary: css` - ${radioboxTokens.fillColor}: var(--text-primary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPrimary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${radioboxTokens.fillColor}: var(--text-secondary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textSecondary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${radioboxTokens.fillColor}: var(--text-tertiary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textTertiary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${radioboxTokens.fillColor}: var(--text-paragraph); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textParagraph}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${radioboxTokens.fillColor}: var(--text-positive); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPositive}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${radioboxTokens.fillColor}: var(--text-warning); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textWarning}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated negative: css` - ${radioboxTokens.fillColor}: var(--text-negative); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textNegative}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -173,7 +189,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/plasma-web/src/components/Range/Range.clear.config.ts b/packages/plasma-web/src/components/Range/Range.clear.config.ts index 53faca3d526..3e26210ebef 100644 --- a/packages/plasma-web/src/components/Range/Range.clear.config.ts +++ b/packages/plasma-web/src/components/Range/Range.clear.config.ts @@ -1,3 +1,31 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -14,57 +42,57 @@ export const config = { ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); - - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldBackgroundColorHover}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -75,15 +103,15 @@ export const config = { ${tokens.textFieldBackgroundSuccessColorHover}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; `, }, size: { @@ -91,12 +119,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.5rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -104,24 +132,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -139,22 +167,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -168,12 +196,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -181,24 +209,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -216,22 +244,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -245,12 +273,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -258,24 +286,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -293,22 +321,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -322,12 +350,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -335,24 +363,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -370,22 +398,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -399,12 +427,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -412,24 +440,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -447,22 +475,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -475,10 +503,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -491,12 +519,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -515,12 +543,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -538,16 +566,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-web/src/components/Range/Range.config.ts b/packages/plasma-web/src/components/Range/Range.config.ts index 949174b02cc..2a62ab3c300 100644 --- a/packages/plasma-web/src/components/Range/Range.config.ts +++ b/packages/plasma-web/src/components/Range/Range.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,57 +34,57 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-clear); - ${tokens.borderColor}: var(--surface-transparent-tertiary); - ${tokens.borderColorError}: var(--surface-negative); - ${tokens.borderColorSuccess}: var(--surface-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBorderColorHover}: var(--text-secondary); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); - ${tokens.textFieldBorderColorError}: var(--surface-negative); - ${tokens.textFieldBorderColorErrorHover}: var(--surface-negative-hover); - ${tokens.textFieldBorderColorErrorFocus}: var(--surface-accent); - ${tokens.textFieldBorderColorSuccess}: var(--surface-positive); - ${tokens.textFieldBorderColorSuccessHover}: var(--surface-positive-hover); - ${tokens.textFieldBorderColorSuccessFocus}: var(--surface-accent); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceClear}; + ${tokens.borderColor}: ${surfaceTransparentTertiary}; + ${tokens.borderColorError}: ${surfaceNegative}; + ${tokens.borderColorSuccess}: ${surfacePositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBorderColorHover}: ${textSecondary}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; + ${tokens.textFieldBorderColorError}: ${surfaceNegative}; + ${tokens.textFieldBorderColorErrorHover}: ${surfaceNegativeHover}; + ${tokens.textFieldBorderColorErrorFocus}: ${surfaceAccent}; + ${tokens.textFieldBorderColorSuccess}: ${surfacePositive}; + ${tokens.textFieldBorderColorSuccessHover}: ${surfacePositiveHover}; + ${tokens.textFieldBorderColorSuccessFocus}: ${surfaceAccent}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -67,12 +93,12 @@ export const config = { ${tokens.borderWidth}: 0.063rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -81,23 +107,23 @@ export const config = { ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldBorderWidth}: 0.063rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 4rem; @@ -115,22 +141,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -144,12 +170,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -158,24 +184,24 @@ export const config = { ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldBorderWidth}: 0.063rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -193,22 +219,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -222,12 +248,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -236,24 +262,24 @@ export const config = { ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldBorderWidth}: 0.063rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -271,22 +297,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -300,12 +326,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -314,24 +340,24 @@ export const config = { ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldBorderWidth}: 0.063rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -349,22 +375,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -378,12 +404,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -392,24 +418,24 @@ export const config = { ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldBorderWidth}: 0.063rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -427,22 +453,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -454,10 +480,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -470,12 +496,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -494,12 +520,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -517,20 +543,20 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-clear); - ${tokens.borderColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceClear}; + ${tokens.borderColorReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-web/src/components/Rating/Rating.config.ts b/packages/plasma-web/src/components/Rating/Rating.config.ts index 79e9f36f886..ec4560b9975 100644 --- a/packages/plasma-web/src/components/Rating/Rating.config.ts +++ b/packages/plasma-web/src/components/Rating/Rating.config.ts @@ -1,3 +1,36 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + bodyXXS, + bodyXXSBold, + dsplL, + dsplLBold, + dsplM, + dsplMBold, + dsplS, + dsplSBold, + h1, + h1Bold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +41,36 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; // TODO: change with token data-yellow, when it will be added to theme ${tokens.iconColor}: #F3A912; - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { l: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -48,19 +81,19 @@ export const config = { m: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -71,19 +104,19 @@ export const config = { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -94,19 +127,19 @@ export const config = { xs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.iconMarginBottom}: 0.125rem; ${tokens.contentGap}: 0.375rem; @@ -121,19 +154,19 @@ export const config = { xxs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.fontFamily}: ${bodyXXS.fontFamily}; + ${tokens.fontSize}: ${bodyXXS.fontSize}; + ${tokens.fontStyle}: ${bodyXXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.contentGap}: 0.375rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -146,19 +179,19 @@ export const config = { h1: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tokens.fontFamily}: ${h1.fontFamily}; + ${tokens.fontSize}: ${h1.fontSize}; + ${tokens.fontStyle}: ${h1.fontStyle}; + ${tokens.fontWeight}: ${h1Bold.fontWeight}; + ${tokens.letterSpacing}: ${h1.letterSpacing}; + ${tokens.lineHeight}: ${h1.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.helperTextFontFamily}: ${bodyM.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyM.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyM.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyM.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyM.lineHeight}; ${tokens.contentGap}: 1rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -177,19 +210,19 @@ export const config = { h2: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tokens.fontFamily}: ${h2.fontFamily}; + ${tokens.fontSize}: ${h2.fontSize}; + ${tokens.fontStyle}: ${h2.fontStyle}; + ${tokens.fontWeight}: ${h2Bold.fontWeight}; + ${tokens.letterSpacing}: ${h2.letterSpacing}; + ${tokens.lineHeight}: ${h2.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.875rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -208,19 +241,19 @@ export const config = { h3: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.fontFamily}: ${h3.fontFamily}; + ${tokens.fontSize}: ${h3.fontSize}; + ${tokens.fontStyle}: ${h3.fontStyle}; + ${tokens.fontWeight}: ${h3Bold.fontWeight}; + ${tokens.letterSpacing}: ${h3.letterSpacing}; + ${tokens.lineHeight}: ${h3.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.75rem; ${tokens.singleIconContentGap}: 0.375rem; @@ -239,19 +272,19 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.fontFamily}: ${h4.fontFamily}; + ${tokens.fontSize}: ${h4.fontSize}; + ${tokens.fontStyle}: ${h4.fontStyle}; + ${tokens.fontWeight}: ${h4Bold.fontWeight}; + ${tokens.letterSpacing}: ${h4.letterSpacing}; + ${tokens.lineHeight}: ${h4.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -270,19 +303,19 @@ export const config = { h5: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.fontFamily}: ${h5.fontFamily}; + ${tokens.fontSize}: ${h5.fontSize}; + ${tokens.fontStyle}: ${h5.fontStyle}; + ${tokens.fontWeight}: ${h5Bold.fontWeight}; + ${tokens.letterSpacing}: ${h5.letterSpacing}; + ${tokens.lineHeight}: ${h5.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -301,19 +334,19 @@ export const config = { h6: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tokens.fontFamily}: ${h6.fontFamily}; + ${tokens.fontSize}: ${h6.fontSize}; + ${tokens.fontStyle}: ${h6.fontStyle}; + ${tokens.fontWeight}: ${h6Bold.fontWeight}; + ${tokens.letterSpacing}: ${h6.letterSpacing}; + ${tokens.lineHeight}: ${h6.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -332,19 +365,19 @@ export const config = { displayL: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${tokens.fontFamily}: ${dsplL.fontFamily}; + ${tokens.fontSize}: ${dsplL.fontSize}; + ${tokens.fontStyle}: ${dsplL.fontStyle}; + ${tokens.fontWeight}: ${dsplLBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplL.letterSpacing}; + ${tokens.lineHeight}: ${dsplL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.helperTextFontFamily}: ${h3.fontFamily}; + ${tokens.helperTextFontSize}: ${h3.fontSize}; + ${tokens.helperTextFontStyle}: ${h3.fontStyle}; + ${tokens.helperTextFontWeight}: ${h3.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing}; + ${tokens.helperTextLineHeight}: ${h3.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -363,19 +396,19 @@ export const config = { displayM: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${tokens.fontFamily}: ${dsplM.fontFamily}; + ${tokens.fontSize}: ${dsplM.fontSize}; + ${tokens.fontStyle}: ${dsplM.fontStyle}; + ${tokens.fontWeight}: ${dsplMBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplM.letterSpacing}; + ${tokens.lineHeight}: ${dsplM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -394,19 +427,19 @@ export const config = { displayS: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${dsplS.fontFamily}; + ${tokens.fontSize}: ${dsplS.fontSize}; + ${tokens.fontStyle}: ${dsplS.fontStyle}; + ${tokens.fontWeight}: ${dsplSBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplS.letterSpacing}; + ${tokens.lineHeight}: ${dsplS.lineHeight}; + + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; diff --git a/packages/plasma-web/src/components/Scrollbar/Scrollbar.config.ts b/packages/plasma-web/src/components/Scrollbar/Scrollbar.config.ts index 0220aa026dc..37841a805b3 100644 --- a/packages/plasma-web/src/components/Scrollbar/Scrollbar.config.ts +++ b/packages/plasma-web/src/components/Scrollbar/Scrollbar.config.ts @@ -1,8 +1,10 @@ +import { surfaceTransparentPrimary, surfaceTransparentTertiary } from '@salutejs/plasma-themes/tokens/plasma_web'; + export const config = { view: { default: { - trackColor: 'var(--surface-transparent-primary)', - thumbColor: 'var(--surface-transparent-tertiary)', + trackColor: surfaceTransparentPrimary, + thumbColor: surfaceTransparentTertiary, }, }, size: { diff --git a/packages/plasma-web/src/components/Segment/SegmentGroup.config.ts b/packages/plasma-web/src/components/Segment/SegmentGroup.config.ts index 5e61dd6da39..520ff2481d2 100644 --- a/packages/plasma-web/src/components/Segment/SegmentGroup.config.ts +++ b/packages/plasma-web/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +9,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, }, size: { @@ -74,7 +75,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary}; `, }, orientation: { diff --git a/packages/plasma-web/src/components/Segment/SegmentItem.config.ts b/packages/plasma-web/src/components/Segment/SegmentItem.config.ts index 424dbd9d14f..306163476bc 100644 --- a/packages/plasma-web/src/components/Segment/SegmentItem.config.ts +++ b/packages/plasma-web/src/components/Segment/SegmentItem.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,68 +32,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -83,12 +107,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${segmentTokens.itemBorderRadius}: 0.625rem; @@ -100,12 +124,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -117,12 +141,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, l: css` ${segmentTokens.itemBorderRadius}: 0.875rem; @@ -134,12 +158,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, xl: css` ${segmentTokens.itemBorderRadius}: 1rem; @@ -151,12 +175,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-web/src/components/Select/Select.config.ts b/packages/plasma-web/src/components/Select/Select.config.ts index 35d6b13ec44..03eedaf6fb3 100644 --- a/packages/plasma-web/src/components/Select/Select.config.ts +++ b/packages/plasma-web/src/components/Select/Select.config.ts @@ -1,3 +1,72 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + onLightTextSecondaryActive, + onLightTextSecondaryHover, + outlineReadOnly, + outlineTransparentPrimary, + outlineTransparentPrimaryActive, + outlineTransparentPrimaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,364 +79,364 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldBorderColor}: var(--outline-transparent-primary); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-transparent-primary-active); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldBorderColor}: ${outlineTransparentPrimary}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineTransparentPrimaryActive}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldBorderColor}: var(--surface-positive); - ${tokens.textFieldBorderColorHover}: var(--surface-positive-hover); - ${tokens.textFieldBorderColorFocus}: var(--surface-positive-active); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldBorderColor}: ${surfacePositive}; + ${tokens.textFieldBorderColorHover}: ${surfacePositiveHover}; + ${tokens.textFieldBorderColorFocus}: ${surfacePositiveActive}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldBorderColor}: var(--surface-warning); - ${tokens.textFieldBorderColorHover}: var(--surface-warning-hover); - ${tokens.textFieldBorderColorFocus}: var(--surface-warning-active); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldBorderColor}: ${surfaceWarning}; + ${tokens.textFieldBorderColorHover}: ${surfaceWarningHover}; + ${tokens.textFieldBorderColorFocus}: ${surfaceWarningActive}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldBorderColor}: var(--surface-negative); - ${tokens.textFieldBorderColorHover}: var(--surface-negative-hover); - ${tokens.textFieldBorderColorFocus}: var(--surface-negative-active); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldBorderColor}: ${surfaceNegative}; + ${tokens.textFieldBorderColorHover}: ${surfaceNegativeHover}; + ${tokens.textFieldBorderColorFocus}: ${surfaceNegativeActive}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, accent: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-accent); - ${tokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-accent-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceAccent}; + ${tokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, secondary: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, clear: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-active); - ${tokens.buttonBackgroundColor}: var(--surface-clear); - ${tokens.buttonBackgroundColorHover}: var(--surface-clear); - ${tokens.buttonBackgroundColorActive}: var(--surface-clear); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryActive}; + ${tokens.buttonBackgroundColor}: ${surfaceClear}; + ${tokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${tokens.buttonBackgroundColorActive}: ${surfaceClear}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, dark: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-transparent-deep); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceTransparentDeep}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceTransparentDeepHover}; + ${tokens.buttonBackgroundColorActive}:${onLightSurfaceTransparentDeepActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, black: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, white: css` - ${tokens.buttonColor}: var(--on-light-text-primary); - ${tokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-light-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-light-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-light-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-light-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-dark-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); - - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); + ${tokens.buttonColor}: ${onLightTextPrimary}; + ${tokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onLightTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onLightTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onLightTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onLightTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onDarkSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onDarkSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}:${onDarkSurfaceSolidDefaultActive}; + + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -388,20 +457,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -409,12 +478,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -437,12 +506,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; ${tokens.targetHeight}: 3.5rem; @@ -468,19 +537,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -514,20 +583,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -535,12 +604,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -563,12 +632,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -594,19 +663,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -640,20 +709,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -661,12 +730,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -689,12 +758,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; @@ -720,19 +789,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -766,20 +835,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -787,12 +856,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -815,12 +884,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2rem; @@ -846,19 +915,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -878,69 +947,69 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--on-dark-text-primary); - ${tokens.textFieldChipColorHover}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${onDarkTextPrimary}; + ${tokens.textFieldChipColorHover}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -953,12 +1022,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -977,12 +1046,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -1001,13 +1070,13 @@ export const config = { readOnly: { true: css` ${tokens.disclosureIconOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-clear); - ${tokens.textFieldBorderColorReadOnly}: var(--outline-read-only); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceClear}; + ${tokens.textFieldBorderColorReadOnly}: ${outlineReadOnly}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; ${tokens.textFieldBorderColor}: transparent; ${tokens.textFieldBorderWidth}: 0.063rem; `, diff --git a/packages/plasma-web/src/components/Slider/Slider.config.ts b/packages/plasma-web/src/components/Slider/Slider.config.ts index 1462bcd4547..735be466e4a 100644 --- a/packages/plasma-web/src/components/Slider/Slider.config.ts +++ b/packages/plasma-web/src/components/Slider/Slider.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + outlineTransparentPrimary, + outlineTransparentPrimaryHover, + surfaceAccent, + surfaceAccentGradient, + surfaceSolidDefault, + surfaceSolidTertiary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +24,70 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBorderColor}: var(--outline-transparent-primary); - ${sliderTokens.textFieldBorderColorHover}: var(--outline-transparent-primary-hover); - ${sliderTokens.textFieldBorderColorFocus}: var(--surface-accent); + ${sliderTokens.textFieldBorderColor}: ${outlineTransparentPrimary}; + ${sliderTokens.textFieldBorderColorHover}: ${outlineTransparentPrimaryHover}; + ${sliderTokens.textFieldBorderColorFocus}: ${surfaceAccent}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBorderColor}: var(--outline-transparent-primary); - ${sliderTokens.textFieldBorderColorHover}: var(--outline-transparent-primary-hover); - ${sliderTokens.textFieldBorderColorFocus}: var(--surface-accent); + ${sliderTokens.textFieldBorderColor}: ${outlineTransparentPrimary}; + ${sliderTokens.textFieldBorderColorHover}: ${outlineTransparentPrimaryHover}; + ${sliderTokens.textFieldBorderColorFocus}: ${surfaceAccent}; `, gradient: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent-gradient); + ${sliderTokens.fillColor}: ${surfaceAccentGradient}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBorderColor}: var(--outline-transparent-primary); - ${sliderTokens.textFieldBorderColorHover}: var(--outline-transparent-primary-hover); - ${sliderTokens.textFieldBorderColorFocus}: var(--surface-accent); + ${sliderTokens.textFieldBorderColor}: ${outlineTransparentPrimary}; + ${sliderTokens.textFieldBorderColorHover}: ${outlineTransparentPrimaryHover}; + ${sliderTokens.textFieldBorderColorFocus}: ${surfaceAccent}; `, }, size: { @@ -85,24 +101,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -124,12 +140,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -141,24 +157,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -179,12 +195,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -196,24 +212,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -234,12 +250,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/plasma-web/src/components/Spinner/Spinner.config.ts b/packages/plasma-web/src/components/Spinner/Spinner.config.ts index 1519626183a..a58d403fccc 100644 --- a/packages/plasma-web/src/components/Spinner/Spinner.config.ts +++ b/packages/plasma-web/src/components/Spinner/Spinner.config.ts @@ -1,3 +1,13 @@ +import { + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -19,35 +29,35 @@ export const config = { }, view: { default: css` - --plasma-spinner-color: var(--text-primary); + --plasma-spinner-color: ${textPrimary}; `, /** * @deprecated * использовать `default` */ primary: css` - --plasma-spinner-color: var(--text-primary); + --plasma-spinner-color: ${textPrimary}; `, secondary: css` - --plasma-spinner-color: var(--text-secondary); + --plasma-spinner-color: ${textSecondary}; `, tertiary: css` - --plasma-spinner-color: var(--text-tertiary); + --plasma-spinner-color: ${textTertiary}; `, paragraph: css` - --plasma-spinner-color: var(--text-paragraph); + --plasma-spinner-color: ${textParagraph}; `, accent: css` - --plasma-spinner-color: var(--text-accent); + --plasma-spinner-color: ${textAccent}; `, positive: css` - --plasma-spinner-color: var(--text-positive); + --plasma-spinner-color: ${textPositive}; `, warning: css` - --plasma-spinner-color: var(--text-warning); + --plasma-spinner-color: ${textWarning}; `, negative: css` - --plasma-spinner-color: var(--text-negative); + --plasma-spinner-color: ${textNegative}; `, }, }, diff --git a/packages/plasma-web/src/components/Steps/Steps.config.ts b/packages/plasma-web/src/components/Steps/Steps.config.ts index b45d849f33b..a4c077a9691 100644 --- a/packages/plasma-web/src/components/Steps/Steps.config.ts +++ b/packages/plasma-web/src/components/Steps/Steps.config.ts @@ -1,42 +1,72 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); - - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; + + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -47,10 +77,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -60,26 +90,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -100,33 +130,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.5rem; ${tokens.largeBulletIndentHeight}: 1.25rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyL.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyM.fontFamily}; + ${tokens.contentFontSize}: ${bodyM.fontSize}; + ${tokens.contentFontStyle}: ${bodyM.fontStyle}; + ${tokens.contentFontWeight}: ${bodyM.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyM.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -147,33 +177,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -194,33 +224,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -241,33 +271,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 0.75rem; ${tokens.largeBulletIndentHeight}: 0.5rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -278,8 +308,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/plasma-web/src/components/Switch/Switch.config.ts b/packages/plasma-web/src/components/Switch/Switch.config.ts index 8a08bd686d8..d5ac1d42254 100644 --- a/packages/plasma-web/src/components/Switch/Switch.config.ts +++ b/packages/plasma-web/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,50 +24,50 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -83,17 +96,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -104,7 +117,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/plasma-web/src/components/Table/Table.config.ts b/packages/plasma-web/src/components/Table/Table.config.ts index 770fa22b6d8..d66d88777a4 100644 --- a/packages/plasma-web/src/components/Table/Table.config.ts +++ b/packages/plasma-web/src/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + surfaceTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +28,12 @@ export const config = { }, size: { l: css` - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.headerRowHeight}: 3.125rem; ${tokens.rowHeight}: 3.125rem; @@ -31,9 +43,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.5rem; ${tokens.editableCellIconButtonWidth}: 3rem; @@ -42,18 +54,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.875rem; ${tokens.editableCellInputPadding}: 0 0.75rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.75rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.875rem; @@ -63,12 +75,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -76,20 +88,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.5rem 0.875rem; ${tokens.selectControlPanelGap}: 0.5rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight}; `, m: css` - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.headerRowHeight}: 2.75rem; ${tokens.rowHeight}: 2.75rem; @@ -99,9 +111,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.375rem; ${tokens.editableCellIconButtonWidth}: 2.5rem; @@ -110,18 +122,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.625rem; ${tokens.editableCellInputPadding}: 0 0.625rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.75rem; @@ -131,12 +143,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -144,20 +156,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.75rem; ${tokens.selectControlPanelGap}: 0.625rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, s: css` - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.headerRowHeight}: 2.125rem; ${tokens.rowHeight}: 2.125rem; @@ -167,9 +179,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.25rem; ${tokens.editableCellIconButtonWidth}: 2rem; @@ -178,18 +190,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.5rem; ${tokens.editableCellInputPadding}: 0 0.375rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.25rem 0.5rem; ${tokens.buttonHeight}: 1.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.625rem; @@ -199,12 +211,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.25rem 0 0; ${tokens.selectItemIconSize}: 1rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 0.875rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -212,12 +224,12 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.5rem; ${tokens.selectControlPanelGap}: 0.25rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 8b2e20b8ce7..7f6fc577d1b 100644 --- a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,13 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,78 +18,78 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; diff --git a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index f70368f502f..7a14beb19e8 100644 --- a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h1, + h2, + h3, + h4, + h5, + h6, + inverseTextPrimary, + inverseTextSecondary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,106 +34,106 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -123,12 +149,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -142,12 +168,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -161,12 +187,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -180,12 +206,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -197,12 +223,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tabsTokens.fontFamily}: ${h6.fontFamily}; + ${tabsTokens.fontSize}: ${h6.fontSize}; + ${tabsTokens.fontStyle}: ${h6.fontStyle}; + ${tabsTokens.fontWeight}: ${h6.fontWeight}; + ${tabsTokens.letterSpacing}: ${h6.letterSpacing}; + ${tabsTokens.lineHeight}: ${h6.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -214,12 +240,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -231,12 +257,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -248,12 +274,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -265,12 +291,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -282,12 +308,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabs.config.ts index acd89c98f27..8404d8d6656 100644 --- a/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/plasma-web/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +16,36 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/plasma-web/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/plasma-web/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index c1b4b62e4a1..c9c6dc85b64 100644 --- a/packages/plasma-web/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/plasma-web/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/plasma-web/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/plasma-web/src/components/Tabs/vertical/VerticalTabItem.config.ts index c819eeeacbd..02950ea4e63 100644 --- a/packages/plasma-web/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/plasma-web/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +24,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +65,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -69,12 +85,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -89,12 +105,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -109,12 +125,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/plasma-web/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/plasma-web/src/components/Tabs/vertical/VerticalTabs.config.ts index 78eba3f047c..9831cffed1f 100644 --- a/packages/plasma-web/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/plasma-web/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/plasma-web/src/components/TextArea/TextArea.clear.config.ts b/packages/plasma-web/src/components/TextArea/TextArea.clear.config.ts index 19666cc24a7..c64a06e9d15 100644 --- a/packages/plasma-web/src/components/TextArea/TextArea.clear.config.ts +++ b/packages/plasma-web/src/components/TextArea/TextArea.clear.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -19,31 +42,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, /** * @deprecated @@ -60,31 +83,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` ${tokens.inputBackgroundColor}: transparent; @@ -97,31 +120,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-positive); - ${tokens.inputColorFocus}: var(--text-positive); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPositive}; + ${tokens.inputColorFocus}: ${textPositive}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` ${tokens.inputBackgroundColor}: transparent; @@ -134,31 +157,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-warning); - ${tokens.inputColorFocus}: var(--text-warning); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textWarning}; + ${tokens.inputColorFocus}: ${textWarning}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` ${tokens.inputBackgroundColor}: transparent; @@ -171,31 +194,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-negative); - ${tokens.inputColorFocus}: var(--text-negative); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textNegative}; + ${tokens.inputColorFocus}: ${textNegative}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -225,30 +248,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -266,12 +289,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -299,30 +322,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -340,12 +363,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -373,30 +396,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -414,12 +437,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -447,30 +470,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -488,12 +511,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -521,30 +544,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -562,24 +585,24 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; ${tokens.tooltipBoxShadow}: var( --shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08) ); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -592,12 +615,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -616,12 +639,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -639,9 +662,9 @@ export const config = { }, readOnly: { true: css` - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/plasma-web/src/components/TextArea/TextArea.config.ts b/packages/plasma-web/src/components/TextArea/TextArea.config.ts index 7b97df76cae..7ec06e81ccb 100644 --- a/packages/plasma-web/src/components/TextArea/TextArea.config.ts +++ b/packages/plasma-web/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + outlineNegative, + outlineNegativeActive, + outlineNegativeHover, + outlinePositive, + outlinePositiveActive, + outlinePositiveHover, + outlineReadOnly, + outlineTransparentPrimary, + outlineTransparentPrimaryActive, + outlineTransparentPrimaryHover, + outlineWarning, + outlineWarningActive, + outlineWarningHover, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,193 +50,193 @@ export const config = { variations: { view: { default: css` - ${tokens.inputBorderColor}: var(--outline-transparent-primary); - ${tokens.inputBorderColorHover}: var(--outline-transparent-primary-hover); - ${tokens.inputBorderColorActive}: var(--outline-transparent-primary-active); - ${tokens.inputBorderColorFocus}: var(--text-accent); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBorderColor}: ${outlineTransparentPrimary}; + ${tokens.inputBorderColorHover}: ${outlineTransparentPrimaryHover}; + ${tokens.inputBorderColorActive}: ${outlineTransparentPrimaryActive}; + ${tokens.inputBorderColorFocus}: ${textAccent}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, /** * @deprecated * использовать `default` */ primary: css` - ${tokens.inputBorderColor}: var(--outline-transparent-primary); - ${tokens.inputBorderColorHover}: var(--outline-transparent-primary-hover); - ${tokens.inputBorderColorActive}: var(--outline-transparent-primary-active); - ${tokens.inputBorderColorFocus}: var(--text-accent); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBorderColor}: ${outlineTransparentPrimary}; + ${tokens.inputBorderColorHover}: ${outlineTransparentPrimaryHover}; + ${tokens.inputBorderColorActive}: ${outlineTransparentPrimaryActive}; + ${tokens.inputBorderColorFocus}: ${textAccent}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` - ${tokens.inputBorderColor}: var(--outline-positive); - ${tokens.inputBorderColorHover}: var(--outline-positive-hover); - ${tokens.inputBorderColorActive}: var(--outline-positive-active); - ${tokens.inputBorderColorFocus}: var(--text-positive); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-positive); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBorderColor}: ${outlinePositive}; + ${tokens.inputBorderColorHover}: ${outlinePositiveHover}; + ${tokens.inputBorderColorActive}: ${outlinePositiveActive}; + ${tokens.inputBorderColorFocus}: ${textPositive}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textPositive}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` - ${tokens.inputBorderColor}: var(--outline-warning); - ${tokens.inputBorderColorHover}: var(--outline-warning-hover); - ${tokens.inputBorderColorActive}: var(--outline-warning-active); - ${tokens.inputBorderColorFocus}: var(--text-warning); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-warning); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBorderColor}: ${outlineWarning}; + ${tokens.inputBorderColorHover}: ${outlineWarningHover}; + ${tokens.inputBorderColorActive}: ${outlineWarningActive}; + ${tokens.inputBorderColorFocus}: ${textWarning}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textWarning}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` - ${tokens.inputBorderColor}: var(--outline-negative); - ${tokens.inputBorderColorHover}: var(--outline-negative-hover); - ${tokens.inputBorderColorActive}: var(--outline-negative-active); - ${tokens.inputBorderColorFocus}: var(--text-negative); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBorderColor}: ${outlineNegative}; + ${tokens.inputBorderColorHover}: ${outlineNegativeHover}; + ${tokens.inputBorderColorActive}: ${outlineNegativeActive}; + ${tokens.inputBorderColorFocus}: ${textNegative}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -224,30 +266,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -265,12 +307,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.751rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -298,30 +340,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -339,12 +381,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -372,30 +414,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -413,12 +455,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -446,30 +488,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.5rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -487,12 +529,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -520,30 +562,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.375rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -561,20 +603,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -587,12 +629,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -611,12 +653,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -633,19 +675,19 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.backgroundColorReadOnly}: var(--surface-clear); - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.borderColorReadOnly}: var(--outline-read-only); - ${tokens.dividerColorReadOnly}: var(--outline-read-only); + ${tokens.backgroundColorReadOnly}: ${surfaceClear}; + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.borderColorReadOnly}: ${outlineReadOnly}; + ${tokens.dividerColorReadOnly}: ${outlineReadOnly}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-web/src/components/TextField/TextField.clear.config.ts b/packages/plasma-web/src/components/TextField/TextField.clear.config.ts index 31d1a8122e8..a3d8a332c3d 100644 --- a/packages/plasma-web/src/components/TextField/TextField.clear.config.ts +++ b/packages/plasma-web/src/components/TextField/TextField.clear.config.ts @@ -1,3 +1,52 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,132 +58,132 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-positive); + ${tokens.color}: ${textPositive}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-positive); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textPositive}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-positive); - ${tokens.contentSlotColorHover}: var(--text-positive-hover); - ${tokens.contentSlotColorActive}: var(--text-positive-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPositive}; + ${tokens.contentSlotColorHover}: ${textPositiveHover}; + ${tokens.contentSlotColorActive}: ${textPositiveActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-warning); + ${tokens.color}: ${textWarning}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-warning); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textWarning}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-warning); - ${tokens.contentSlotColorHover}: var(--text-warning-hover); - ${tokens.contentSlotColorActive}: var(--text-warning-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textWarning}; + ${tokens.contentSlotColorHover}: ${textWarningHover}; + ${tokens.contentSlotColorActive}: ${textWarningActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-negative); + ${tokens.color}: ${textNegative}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-negative); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textNegative}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -151,40 +200,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -200,19 +249,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -235,40 +284,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -283,12 +332,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -311,40 +360,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -359,12 +408,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -387,40 +436,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -435,12 +484,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -463,40 +512,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -511,12 +560,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -529,126 +578,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -661,12 +710,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -685,12 +734,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -709,13 +758,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); + ${tokens.colorReadOnly}: ${textPrimary}; ${tokens.backgroundColorReadOnly}: transparent; - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/plasma-web/src/components/TextField/TextField.config.ts b/packages/plasma-web/src/components/TextField/TextField.config.ts index cbe467eb8c7..64707071b9b 100644 --- a/packages/plasma-web/src/components/TextField/TextField.config.ts +++ b/packages/plasma-web/src/components/TextField/TextField.config.ts @@ -1,3 +1,55 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + outlineNegative, + outlineNegativeHover, + outlinePositive, + outlinePositiveHover, + outlineReadOnly, + outlineTransparentPrimary, + outlineTransparentPrimaryHover, + outlineWarning, + outlineWarningHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,124 +61,124 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.backgroundColor}: var(--surface-clear); - ${tokens.caretColor}: var(--text-accent); - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.borderColor}: var(--outline-transparent-primary); - ${tokens.borderColorHover}: var(--outline-transparent-primary-hover); - ${tokens.borderColorFocus}: var(--surface-accent); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + ${tokens.backgroundColor}: ${surfaceClear}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.borderColor}: ${outlineTransparentPrimary}; + ${tokens.borderColorHover}: ${outlineTransparentPrimaryHover}; + ${tokens.borderColorFocus}: ${surfaceAccent}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-primary); - ${tokens.backgroundColor}: var(--surface-clear); - ${tokens.caretColor}: var(--text-accent); - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.borderColor}: var(--outline-positive); - ${tokens.borderColorHover}: var(--outline-positive-hover); - ${tokens.borderColorFocus}: var(--surface-accent); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + ${tokens.backgroundColor}: ${surfaceClear}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.borderColor}: ${outlinePositive}; + ${tokens.borderColorHover}: ${outlinePositiveHover}; + ${tokens.borderColorFocus}: ${surfaceAccent}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-primary); - ${tokens.backgroundColor}: var(--surface-clear); - ${tokens.caretColor}: var(--text-accent); - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.borderColor}: var(--outline-warning); - ${tokens.borderColorHover}: var(--outline-warning-hover); - ${tokens.borderColorFocus}: var(--surface-accent); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + ${tokens.backgroundColor}: ${surfaceClear}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.borderColor}: ${outlineWarning}; + ${tokens.borderColorHover}: ${outlineWarningHover}; + ${tokens.borderColorFocus}: ${surfaceAccent}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); - ${tokens.backgroundColor}: var(--surface-clear); - ${tokens.caretColor}: var(--text-accent); - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.borderColor}: var(--outline-negative); - ${tokens.borderColorHover}: var(--outline-negative-hover); - ${tokens.borderColorFocus}: var(--surface-accent); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + ${tokens.backgroundColor}: ${surfaceClear}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.borderColor}: ${outlineNegative}; + ${tokens.borderColorHover}: ${outlineNegativeHover}; + ${tokens.borderColorFocus}: ${surfaceAccent}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -140,40 +192,40 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -189,19 +241,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -225,40 +277,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -271,12 +323,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -302,40 +354,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -348,12 +400,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -379,40 +431,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -425,12 +477,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -456,40 +508,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -502,12 +554,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -522,126 +574,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -654,12 +706,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -678,12 +730,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -702,14 +754,14 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-clear); - ${tokens.borderColorReadOnly}: var(--outline-read-only); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--outline-read-only); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceClear}; + ${tokens.borderColorReadOnly}: ${outlineReadOnly}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${outlineReadOnly}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; ${tokens.borderColor}: transparent; ${tokens.borderWidth}: 0.063rem; diff --git a/packages/plasma-web/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/plasma-web/src/components/TextFieldGroup/TextFieldGroup.config.ts index 998758e1c1a..8734c375eb1 100644 --- a/packages/plasma-web/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/plasma-web/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.textFieldDefaultRadius}: 0.75rem; @@ -77,28 +78,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -111,12 +112,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -133,28 +134,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -167,12 +168,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.textFieldSegmentedRadius}: 0.125rem; @@ -189,28 +190,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -223,12 +224,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/plasma-web/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts b/packages/plasma-web/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts index a33164279df..c78f145c082 100644 --- a/packages/plasma-web/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts +++ b/packages/plasma-web/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + textAccent, + textNegative, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,10 +35,10 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -25,45 +51,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -76,45 +102,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-positive); - ${tokens.textFieldContentSlotColorHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColor}: ${textPositive}; + ${tokens.textFieldContentSlotColorHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorActive}: ${textPositiveActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-positive); + ${tokens.scaleValueColor}: ${textPositive}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -127,45 +153,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -178,50 +204,50 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-negative); + ${tokens.scaleValueColor}: ${textNegative}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -235,38 +261,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -288,12 +314,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -305,38 +331,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -358,12 +384,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -375,38 +401,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -428,12 +454,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -445,38 +471,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -498,12 +524,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -515,38 +541,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -568,20 +594,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -594,12 +620,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -618,12 +644,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -641,12 +667,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/plasma-web/src/components/TextFieldSlider/TextFieldSlider.config.ts b/packages/plasma-web/src/components/TextFieldSlider/TextFieldSlider.config.ts index ad0905a4813..ddb13047125 100644 --- a/packages/plasma-web/src/components/TextFieldSlider/TextFieldSlider.config.ts +++ b/packages/plasma-web/src/components/TextFieldSlider/TextFieldSlider.config.ts @@ -1,3 +1,35 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + outlineNegative, + outlineNegativeHover, + outlinePositive, + outlinePositiveHover, + outlineReadOnly, + outlineTransparentPrimary, + outlineTransparentPrimaryHover, + outlineWarning, + outlineWarningHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceClear, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + textAccent, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,223 +41,223 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-clear); - ${tokens.textFieldBorderErrorColor}: var(--surface-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceClear}; + ${tokens.textFieldBorderErrorColor}: ${surfaceNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorHover}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; - ${tokens.textFieldBorderColor}: var(--outline-transparent-primary); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: ${outlineTransparentPrimary}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-clear); - ${tokens.textFieldBorderErrorColor}: var(--surface-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceClear}; + ${tokens.textFieldBorderErrorColor}: ${surfaceNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorHover}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; - ${tokens.textFieldBorderColor}: var(--outline-positive); - ${tokens.textFieldBorderColorHover}: var(--outline-positive-hover); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: ${outlinePositive}; + ${tokens.textFieldBorderColorHover}: ${outlinePositiveHover}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-clear); - ${tokens.textFieldBorderErrorColor}: var(--surface-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceClear}; + ${tokens.textFieldBorderErrorColor}: ${surfaceNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorHover}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; - ${tokens.textFieldBorderColor}: var(--outline-warning); - ${tokens.textFieldBorderColorHover}: var(--outline-warning-hover); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: ${outlineWarning}; + ${tokens.textFieldBorderColorHover}: ${outlineWarningHover}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-clear); - ${tokens.textFieldBorderErrorColor}: var(--surface-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceClear}; + ${tokens.textFieldBorderErrorColor}: ${surfaceNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorHover}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; - ${tokens.textFieldBorderColor}: var(--outline-negative); - ${tokens.textFieldBorderColorHover}: var(--outline-negative-hover); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: ${outlineNegative}; + ${tokens.textFieldBorderColorHover}: ${outlineNegativeHover}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -240,38 +272,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -293,12 +325,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -311,38 +343,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -364,12 +396,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -382,38 +414,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -435,12 +467,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -453,38 +485,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -506,12 +538,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -524,38 +556,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -577,20 +609,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -603,12 +635,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -627,12 +659,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -650,12 +682,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-clear); - ${tokens.textFieldBorderColorReadOnly}: var(--outline-read-only); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceClear}; + ${tokens.textFieldBorderColorReadOnly}: ${outlineReadOnly}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 1; diff --git a/packages/plasma-web/src/components/TimePicker/TimePicker.config.ts b/packages/plasma-web/src/components/TimePicker/TimePicker.config.ts index e877c2a5cf0..8415081abb4 100644 --- a/packages/plasma-web/src/components/TimePicker/TimePicker.config.ts +++ b/packages/plasma-web/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + outlineTransparentPrimary, + outlineTransparentPrimaryHover, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,57 +33,57 @@ export const config = { variations: { view: { default: css` - ${tokens.borderColor}: var(--outline-transparent-primary); - ${tokens.borderColorHover}: var(--outline-transparent-primary-hover); - ${tokens.borderColorFocus}: var(--surface-accent); + ${tokens.borderColor}: ${outlineTransparentPrimary}; + ${tokens.borderColorHover}: ${outlineTransparentPrimaryHover}; + ${tokens.borderColorFocus}: ${surfaceAccent}; - ${tokens.textFieldBorderColorSuccess}: var(--surface-positive); - ${tokens.textFieldBorderColorSuccessHover}: var(--surface-positive); - ${tokens.textFieldBorderColorSuccessFocus}: var(--surface-accent); + ${tokens.textFieldBorderColorSuccess}: ${surfacePositive}; + ${tokens.textFieldBorderColorSuccessHover}: ${surfacePositive}; + ${tokens.textFieldBorderColorSuccessFocus}: ${surfaceAccent}; - ${tokens.textFieldBorderColorError}: var(--surface-negative); - ${tokens.textFieldBorderColorErrorHover}: var(--surface-negative); - ${tokens.textFieldBorderColorErrorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColorError}: ${surfaceNegative}; + ${tokens.textFieldBorderColorErrorHover}: ${surfaceNegative}; + ${tokens.textFieldBorderColorErrorFocus}: ${surfaceAccent}; - ${tokens.background}: var(--surface-clear); - ${tokens.backgroundError}: var(--surface-clear); - ${tokens.backgroundSuccess}: var(--surface-clear); + ${tokens.background}: ${surfaceClear}; + ${tokens.backgroundError}: ${surfaceClear}; + ${tokens.backgroundSuccess}: ${surfaceClear}; - ${tokens.labelColor}: var(--text-primary); + ${tokens.labelColor}: ${textPrimary}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); + ${tokens.timePickerShadow}: ${shadowDownSoftS}; - ${tokens.textFieldBackgroundColor}: var(--surface-clear); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-clear); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-clear); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-clear); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-clear); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-clear); + ${tokens.textFieldBackgroundColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceClear}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceClear}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceClear}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -76,12 +99,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -93,12 +116,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -116,34 +139,34 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.5rem; @@ -160,12 +183,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -177,12 +200,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -200,34 +223,34 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -244,12 +267,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -261,12 +284,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -284,34 +307,34 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.813rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -328,12 +351,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -345,12 +368,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -368,34 +391,34 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -466,13 +489,13 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/plasma-web/src/components/Toast/Toast.config.ts b/packages/plasma-web/src/components/Toast/Toast.config.ts index d0d7038c25b..ac12d83ac8c 100644 --- a/packages/plasma-web/src/components/Toast/Toast.config.ts +++ b/packages/plasma-web/src/components/Toast/Toast.config.ts @@ -1,3 +1,17 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,60 +23,60 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-positive); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textPositive}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-negative); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textNegative}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * использовать `default` */ primary: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary); + ${toastTokens.closeIconColor}: ${onDarkTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary); + ${toastTokens.closeIconColor}: ${onLightTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextSecondary}; `, }, size: { @@ -70,12 +84,12 @@ export const config = { ${toastTokens.borderRadius}: 0.75rem; ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/plasma-web/src/components/Toolbar/Toolbar.config.ts b/packages/plasma-web/src/components/Toolbar/Toolbar.config.ts index 89581b0d6bf..2613eada094 100644 --- a/packages/plasma-web/src/components/Toolbar/Toolbar.config.ts +++ b/packages/plasma-web/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/plasma-web/src/components/Tooltip/Tooltip.config.ts b/packages/plasma-web/src/components/Tooltip/Tooltip.config.ts index 2ca59cef4c5..87a780547e5 100644 --- a/packages/plasma-web/src/components/Tooltip/Tooltip.config.ts +++ b/packages/plasma-web/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,4 @@ +import { bodyS, bodyXS, surfaceSolidCardBrightness, textPrimary } from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +17,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -30,7 +31,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -41,12 +42,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -55,15 +56,15 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.color}: ${textPrimary}; `, }, }, diff --git a/packages/plasma-web/src/components/Tree/Tree.config.ts b/packages/plasma-web/src/components/Tree/Tree.config.ts index e8cbfce73a6..42a3e393b04 100644 --- a/packages/plasma-web/src/components/Tree/Tree.config.ts +++ b/packages/plasma-web/src/components/Tree/Tree.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,24 +24,24 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -53,12 +69,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.itemHeight}: 3.5rem; @@ -84,12 +100,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.itemHeight}: 3rem; @@ -115,12 +131,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -146,12 +162,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.itemHeight}: 2rem; @@ -177,12 +193,12 @@ export const config = { ${tokens.checkboxInnerSize}: 0.875rem; ${tokens.checkboxBorderRadius}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/plasma-web/src/components/Typography/Body.config.ts b/packages/plasma-web/src/components/Typography/Body.config.ts index 23927fdf18c..beadf5cef1e 100644 --- a/packages/plasma-web/src/components/Typography/Body.config.ts +++ b/packages/plasma-web/src/components/Typography/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/plasma-web/src/components/Typography/Dspl.config.ts b/packages/plasma-web/src/components/Typography/Dspl.config.ts index 3fb1245a027..6851f487efc 100644 --- a/packages/plasma-web/src/components/Typography/Dspl.config.ts +++ b/packages/plasma-web/src/components/Typography/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +18,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +38,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +58,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/plasma-web/src/components/Typography/Heading.config.ts b/packages/plasma-web/src/components/Typography/Heading.config.ts index 77f16729129..8960f3b02c7 100644 --- a/packages/plasma-web/src/components/Typography/Heading.config.ts +++ b/packages/plasma-web/src/components/Typography/Heading.config.ts @@ -1,3 +1,23 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, + h6, + h6Bold, + h6Medium, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configH1 = { @@ -7,14 +27,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +46,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +65,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +84,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +103,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, @@ -102,14 +122,14 @@ export const configH6 = { variations: { size: { h6: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + ${typographyTokens.typoFontFamily}: ${h6.fontFamily}; + ${typographyTokens.typoFontSize}: ${h6.fontSize}; + ${typographyTokens.typoFontStyle}: ${h6.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h6.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h6Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h6Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h6.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h6.lineHeight}; `, }, }, diff --git a/packages/plasma-web/src/components/Typography/Text.config.ts b/packages/plasma-web/src/components/Typography/Text.config.ts index 542bc09a87d..c7c268a2432 100644 --- a/packages/plasma-web/src/components/Typography/Text.config.ts +++ b/packages/plasma-web/src/components/Typography/Text.config.ts @@ -1,3 +1,17 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_web'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +21,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +41,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +61,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +81,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, From 3d18a68622357bd7311554d6a74e6eb1e16cc459 Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 19:41:41 +0300 Subject: [PATCH 10/24] chore(sdds-bizcom): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 285 +++-- .../src/components/Attach/Attach.config.ts | 899 +++++++------- .../Autocomplete/Autocomplete.config.ts | 553 +++++---- .../src/components/Badge/Badge.config.ts | 148 ++- .../Breadcrumbs/Breadcrumbs.config.ts | 68 +- .../src/components/Button/Button.config.ts | 258 ++-- .../ButtonGroup/ButtonGroup.config.ts | 300 +++-- .../components/Calendar/Calendar.config.ts | 460 +++---- .../Calendar/CalendarDouble.config.ts | 460 +++---- .../src/components/Card/Card.config.ts | 3 +- .../components/Carousel/Carousel.config.ts | 5 +- .../src/components/Cell/Cell.config.ts | 169 +-- .../components/Checkbox/Checkbox.config.ts | 156 +-- .../components/ChipGroup/ChipGroup.config.ts | 102 +- .../components/CodeField/CodeField.config.ts | 82 +- .../components/Combobox/Combobox.config.ts | 753 ++++++------ .../src/components/Counter/Counter.config.ts | 103 +- .../DatePicker/DatePicker.clear.config.ts | 1035 ++++++++-------- .../DatePicker/DatePicker.config.ts | 1022 ++++++++-------- .../DateTimePicker/DateTimePicker.config.ts | 954 ++++++++------- .../src/components/Divider/Divider.config.ts | 14 +- .../src/components/Drawer/Drawer.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 132 +- .../components/Dropzone/Dropzone.config.ts | 53 +- .../EmbedIconButton/EmbedIconButton.config.ts | 125 +- .../EmptyState/EmptyState.config.ts | 49 +- .../src/components/File/File.config.ts | 158 +-- .../IconButton/IconButton.config.ts | 182 +-- .../InformationWrapper.config.ts | 295 ++--- .../LinkButton/LinkButton.config.ts | 210 ++-- .../src/components/List/List.config.ts | 77 +- .../src/components/Loader/Loader.config.ts | 181 +-- .../src/components/Modal/Modal.config.ts | 20 +- .../src/components/Note/Note.config.ts | 146 ++- .../Notification/Notification.config.ts | 196 +-- .../NumberInput/NumberInput.config.ts | 289 +++-- .../Pagination/Pagination.config.ts | 220 ++-- .../src/components/Popover/Popover.config.ts | 5 +- .../components/Progress/Progress.config.ts | 53 +- .../ProgressBarCircular.config.ts | 146 ++- .../components/Radiobox/Radiobox.config.ts | 154 +-- .../components/Range/Range.clear.config.ts | 484 ++++---- .../src/components/Range/Range.config.ts | 467 +++---- .../src/components/Rating/Rating.config.ts | 385 +++--- .../components/Segment/SegmentGroup.config.ts | 11 +- .../components/Segment/SegmentItem.config.ts | 168 +-- .../src/components/Select/Select.config.ts | 1086 +++++++++-------- .../Skeleton/LineSkeleton.config.ts | 108 +- .../src/components/Slider/Slider.config.ts | 209 ++-- .../src/components/Steps/Steps.config.ts | 332 ++--- .../src/components/Switch/Switch.config.ts | 103 +- .../src/components/Table/Table.config.ts | 180 +-- .../HorizontalIconTabItem.config.ts | 70 +- .../horizontal/HorizontalTabItem.config.ts | 258 ++-- .../Tabs/horizontal/HorizontalTabs.config.ts | 36 +- .../vertical/VerticalIconTabItem.config.ts | 23 +- .../Tabs/vertical/VerticalTabItem.config.ts | 90 +- .../Tabs/vertical/VerticalTabs.config.ts | 17 +- .../TextArea/TextArea.clear.config.ts | 443 +++---- .../components/TextArea/TextArea.config.ts | 642 +++++----- .../TextField/TextField.clear.config.ts | 789 ++++++------ .../components/TextField/TextField.config.ts | 811 ++++++------ .../TextFieldGroup/TextFieldGroup.config.ts | 193 +-- .../TextFieldSlider.clear.config.ts | 606 ++++----- .../TextFieldSlider/TextFieldSlider.config.ts | 658 +++++----- .../TimePicker/TimePicker.config.ts | 331 ++--- .../src/components/Toast/Toast.config.ts | 70 +- .../src/components/Toolbar/Toolbar.config.ts | 11 +- .../src/components/Tooltip/Tooltip.config.ts | 33 +- .../src/components/Tree/Tree.config.ts | 106 +- .../src/components/Typography/Body.config.ts | 97 +- .../src/components/Typography/Dspl.config.ts | 59 +- .../components/Typography/Heading.config.ts | 116 +- .../src/components/Typography/Text.config.ts | 78 +- 74 files changed, 10589 insertions(+), 9015 deletions(-) diff --git a/packages/sdds-bizcom/src/components/Accordion/Accordion.config.ts b/packages/sdds-bizcom/src/components/Accordion/Accordion.config.ts index d70ce2c93e6..d083e73c6e3 100644 --- a/packages/sdds-bizcom/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-bizcom/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,28 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,12 +36,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, @@ -24,14 +49,14 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -42,19 +67,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.875rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyLBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -63,19 +88,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -84,19 +109,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -105,19 +130,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXSBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.lineHeight}; `, h2: css` ${accordionTokens.accordionItemPaddingVertical}: 1rem; @@ -126,19 +151,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h2Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -147,19 +172,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 0.688rem; @@ -167,19 +192,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h5: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -187,19 +212,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h6: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -207,19 +232,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h6Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Attach/Attach.config.ts b/packages/sdds-bizcom/src/components/Attach/Attach.config.ts index b62ab061eec..6cc2e81e9b2 100644 --- a/packages/sdds-bizcom/src/components/Attach/Attach.config.ts +++ b/packages/sdds-bizcom/src/components/Attach/Attach.config.ts @@ -1,3 +1,54 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,439 +61,439 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.buttonColorActive}: var(--text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.buttonColorHover}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.buttonColorActive}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.iconButtonColorHover}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.iconButtonColorActive}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary-hover); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.buttonColorActive}: var(--text-primary-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColorHover}: ${textPrimaryHover}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.buttonColorActive}: ${textPrimaryActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary-hover); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonColorActive}: var(--text-primary-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonColorActive}: ${textPrimaryActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, success: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-positive); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfacePositive}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, warning: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-warning); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceWarning}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, critical: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-negative); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceNegative}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-negative-active); - - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; + + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, dark: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, black: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, white: css` - ${attachTokens.buttonColor}: var(--on-light-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.buttonColor}: ${onLightTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -457,12 +508,12 @@ export const config = { ${attachTokens.buttonWidth}: 12.5rem; ${attachTokens.buttonPadding}: 1.5rem; ${attachTokens.buttonRadius}: 0.875rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyL.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -481,37 +532,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonHeight}: 3.5rem; ${attachTokens.iconButtonWidth}: 3.5rem; ${attachTokens.iconButtonPadding}: 1.5rem; ${attachTokens.iconButtonRadius}: 0.875rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -520,12 +571,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -547,12 +598,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -571,37 +622,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -610,12 +661,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -637,12 +688,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -661,37 +712,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -700,12 +751,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -727,12 +778,12 @@ export const config = { ${attachTokens.buttonWidth}: 10rem; ${attachTokens.buttonPadding}: 0.75rem; ${attachTokens.buttonRadius}: 0.5rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -751,37 +802,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.25rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2rem; ${attachTokens.iconButtonWidth}: 2rem; ${attachTokens.iconButtonPadding}: 0.75rem; ${attachTokens.iconButtonRadius}: 0.5rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -790,12 +841,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/sdds-bizcom/src/components/Autocomplete/Autocomplete.config.ts b/packages/sdds-bizcom/src/components/Autocomplete/Autocomplete.config.ts index 445f4504839..6a4983a0100 100644 --- a/packages/sdds-bizcom/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/sdds-bizcom/src/components/Autocomplete/Autocomplete.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,172 +40,172 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-positive); - ${tokens.textFieldDividerColorHover}: var(--surface-positive); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfacePositive}; + ${tokens.textFieldDividerColorHover}: ${surfacePositive}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-warning); - ${tokens.textFieldDividerColorHover}: var(--surface-warning); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceWarning}; + ${tokens.textFieldDividerColorHover}: ${surfaceWarning}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--surface-negative); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${surfaceNegative}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, }, size: { @@ -193,21 +224,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -215,12 +246,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -240,12 +271,12 @@ export const config = { ${tokens.itemPadding}: 1.0625rem 1rem; ${tokens.itemBorderRadius}: 0.75rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; ${tokens.emptyStateGap}: 0.5rem; @@ -268,21 +299,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -290,12 +321,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -315,12 +346,12 @@ export const config = { ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; ${tokens.emptyStateGap}: 0.375rem; @@ -343,21 +374,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -365,12 +396,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -390,12 +421,12 @@ export const config = { ${tokens.itemPadding}: 0.6875rem 0.75rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -418,21 +449,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -440,12 +471,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -465,12 +496,12 @@ export const config = { ${tokens.itemPadding}: 0.5625rem 0.5rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; ${tokens.emptyStateGap}: 0.25rem; @@ -481,22 +512,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -509,12 +540,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -533,12 +564,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -556,14 +587,14 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Badge/Badge.config.ts b/packages/sdds-bizcom/src/components/Badge/Badge.config.ts index 3d8e8df196e..992d4568ceb 100644 --- a/packages/sdds-bizcom/src/components/Badge/Badge.config.ts +++ b/packages/sdds-bizcom/src/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +36,67 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -78,12 +106,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -97,12 +125,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -116,12 +144,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -135,12 +163,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -159,7 +187,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/sdds-bizcom/src/components/Breadcrumbs/Breadcrumbs.config.ts index 1661a5df0e3..b5b6ceb6c0e 100644 --- a/packages/sdds-bizcom/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/sdds-bizcom/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,53 +20,53 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { l: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.5rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-l-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-l-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-l-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-l-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-l-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight}; `, m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${breadcrumbsTokens.breadcrumbsGap}: 0rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-xs-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-xs-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-xs-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-xs-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-xs-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Button/Button.config.ts b/packages/sdds-bizcom/src/components/Button/Button.config.ts index 5d4e666a7b9..4cd3a5c7e5c 100644 --- a/packages/sdds-bizcom/src/components/Button/Button.config.ts +++ b/packages/sdds-bizcom/src/components/Button/Button.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,104 +53,104 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -115,12 +159,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.75rem; ${buttonTokens.buttonRadius}: 1rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.5rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -136,12 +180,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 0.875rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -157,12 +201,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -178,12 +222,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -199,12 +243,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -220,12 +264,12 @@ export const config = { ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: 0.375rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 0.75rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -244,7 +288,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/sdds-bizcom/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/sdds-bizcom/src/components/ButtonGroup/ButtonGroup.config.ts index 38cdcc186d3..370bac4a505 100644 --- a/packages/sdds-bizcom/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/sdds-bizcom/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,124 +56,124 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, success: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; `, }, size: { @@ -136,12 +184,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 4rem; ${buttonGroupTokens.buttonPadding}: 1.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, l: css` ${buttonGroupTokens.buttonDefaultRadius}: 0.875rem; @@ -150,12 +198,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3.5rem; ${buttonGroupTokens.buttonPadding}: 1.5rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, m: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -165,12 +213,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -179,12 +227,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -193,12 +241,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -207,12 +255,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 1.5rem; ${buttonGroupTokens.buttonPadding}: 0.625rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-bizcom/src/components/Calendar/Calendar.config.ts b/packages/sdds-bizcom/src/components/Calendar/Calendar.config.ts index fc0a15388db..538b1be429f 100644 --- a/packages/sdds-bizcom/src/components/Calendar/Calendar.config.ts +++ b/packages/sdds-bizcom/src/components/Calendar/Calendar.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,38 +35,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -51,46 +77,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +126,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 4rem; ${calendarBaseTokens.iconButtonWidth}: 4rem; @@ -120,46 +146,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -169,13 +195,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3.5rem; ${calendarBaseTokens.iconButtonWidth}: 3.5rem; @@ -189,46 +215,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -238,13 +264,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -258,46 +284,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -307,13 +333,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -327,46 +353,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -376,13 +402,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; @@ -400,12 +426,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -414,7 +440,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -425,12 +451,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -439,7 +465,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-bizcom/src/components/Calendar/CalendarDouble.config.ts index 70c9a8be880..6184613e0c8 100644 --- a/packages/sdds-bizcom/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-bizcom/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,39 +35,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -52,46 +78,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +127,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 4rem; ${calendarDoubleTokens.iconButtonWidth}: 4rem; @@ -121,46 +147,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -170,13 +196,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; @@ -190,46 +216,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -239,13 +265,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -259,46 +285,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -308,13 +334,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -328,46 +354,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +403,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; @@ -401,12 +427,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -415,7 +441,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -426,12 +452,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -440,7 +466,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Card/Card.config.ts b/packages/sdds-bizcom/src/components/Card/Card.config.ts index 2899613fb13..075ce28565c 100644 --- a/packages/sdds-bizcom/src/components/Card/Card.config.ts +++ b/packages/sdds-bizcom/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,7 +9,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/sdds-bizcom/src/components/Carousel/Carousel.config.ts b/packages/sdds-bizcom/src/components/Carousel/Carousel.config.ts index 24e55722786..96b41dff27e 100644 --- a/packages/sdds-bizcom/src/components/Carousel/Carousel.config.ts +++ b/packages/sdds-bizcom/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidDefault, surfaceTransparentTertiary } from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,8 +9,8 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary); - ${tokens.paginationDotActiveBackground}: var(--surface-solid-default); + ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary}; + ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault}; `, }, size: { diff --git a/packages/sdds-bizcom/src/components/Cell/Cell.config.ts b/packages/sdds-bizcom/src/components/Cell/Cell.config.ts index 6588088c11f..9f9cbdeaf4b 100644 --- a/packages/sdds-bizcom/src/components/Cell/Cell.config.ts +++ b/packages/sdds-bizcom/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -87,26 +88,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -119,26 +120,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Checkbox/Checkbox.config.ts b/packages/sdds-bizcom/src/components/Checkbox/Checkbox.config.ts index 53d71aca8ad..7725676a193 100644 --- a/packages/sdds-bizcom/src/components/Checkbox/Checkbox.config.ts +++ b/packages/sdds-bizcom/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,18 +33,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -39,18 +55,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${checkboxTokens.margin}: 0; @@ -60,91 +76,91 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.125rem; ${checkboxTokens.contentTopOffset}: 0.0625rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyL.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${checkboxTokens.fillColor}: var(--text-primary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPrimary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${checkboxTokens.fillColor}: var(--text-secondary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textSecondary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${checkboxTokens.fillColor}: var(--text-tertiary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textTertiary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${checkboxTokens.fillColor}: var(--text-paragraph); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textParagraph}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${checkboxTokens.fillColor}: var(--text-positive); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPositive}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${checkboxTokens.fillColor}: var(--text-warning); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textWarning}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, negative: css` - ${checkboxTokens.fillColor}: var(--text-negative); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textNegative}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-negative); + ${checkboxTokens.triggerBorderColor}: ${textNegative}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -155,7 +171,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/ChipGroup/ChipGroup.config.ts b/packages/sdds-bizcom/src/components/ChipGroup/ChipGroup.config.ts index 2bed06ad8c0..9c777ad714c 100644 --- a/packages/sdds-bizcom/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/sdds-bizcom/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +26,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +57,12 @@ export const config = { ${tokens.chipHeight}: 3rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.5rem; @@ -60,12 +78,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -81,12 +99,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; @@ -102,12 +120,12 @@ export const config = { ${tokens.chipHeight}: 1.5rem; ${tokens.chipPadding}: 0 0.625rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/sdds-bizcom/src/components/CodeField/CodeField.config.ts b/packages/sdds-bizcom/src/components/CodeField/CodeField.config.ts index 931b4d3e85c..c68dff15e15 100644 --- a/packages/sdds-bizcom/src/components/CodeField/CodeField.config.ts +++ b/packages/sdds-bizcom/src/components/CodeField/CodeField.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, codeFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,18 +25,18 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--surface-accent); + ${tokens.caretColor}: ${surfaceAccent}; - ${tokens.captionColor}: var(--text-secondary); - ${tokens.captionColorError}: var(--text-negative); + ${tokens.captionColor}: ${textSecondary}; + ${tokens.captionColorError}: ${textNegative}; - ${tokens.codeColor}: var(--text-primary); - ${tokens.codeColorError}: var(--text-negative); + ${tokens.codeColor}: ${textPrimary}; + ${tokens.codeColorError}: ${textNegative}; - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; `, }, size: { @@ -33,19 +49,19 @@ export const config = { ${tokens.codeItemWidth}: 2.75rem; ${tokens.codeItemHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.captionFontFamily}: ${bodyS.fontFamily}; + ${tokens.captionFontSize}: ${bodyS.fontSize}; + ${tokens.captionFontStyle}: ${bodyS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyS.lineHeight}; ${tokens.borderRadius}: 0.875rem; ${tokens.borderRadiusSegmented}: 0.375rem; @@ -60,19 +76,19 @@ export const config = { ${tokens.codeItemWidth}: 2.375rem; ${tokens.codeItemHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.captionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.captionFontSize}: ${bodyXS.fontSize}; + ${tokens.captionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyXS.lineHeight}; ${tokens.borderRadius}: 0.75rem; ${tokens.borderRadiusSegmented}: 0.25rem; diff --git a/packages/sdds-bizcom/src/components/Combobox/Combobox.config.ts b/packages/sdds-bizcom/src/components/Combobox/Combobox.config.ts index 9b023838c5d..49de018770c 100644 --- a/packages/sdds-bizcom/src/components/Combobox/Combobox.config.ts +++ b/packages/sdds-bizcom/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,221 +40,221 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -243,20 +274,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -264,12 +295,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -292,12 +323,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 1rem; ${tokens.padding}: 0.125rem; @@ -319,19 +350,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -364,20 +395,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -385,12 +416,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -413,12 +444,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -440,19 +471,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -485,20 +516,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -506,12 +537,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -534,12 +565,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 0.625rem 0.875rem 0.625rem 0.875rem; ${tokens.padding}: 0.125rem; @@ -561,19 +592,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -606,20 +637,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -627,12 +658,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -655,12 +686,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 0.5rem 0.625rem 0.5rem 0.625rem; ${tokens.padding}: 0.125rem; @@ -682,19 +713,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -714,22 +745,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -742,12 +773,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -766,12 +797,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -789,13 +820,13 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Counter/Counter.config.ts b/packages/sdds-bizcom/src/components/Counter/Counter.config.ts index 140aa43a57f..40fc036150b 100644 --- a/packages/sdds-bizcom/src/components/Counter/Counter.config.ts +++ b/packages/sdds-bizcom/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,32 +23,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -41,56 +56,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/DatePicker/DatePicker.clear.config.ts b/packages/sdds-bizcom/src/components/DatePicker/DatePicker.clear.config.ts index c2e334a638a..56c663bbc14 100644 --- a/packages/sdds-bizcom/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/sdds-bizcom/src/components/DatePicker/DatePicker.clear.config.ts @@ -1,3 +1,46 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,64 +51,64 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); + ${tokens.outlineFocusColor}: ${surfaceAccent}; ${tokens.background}: transparent; ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.focusColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.focusColor}: ${textAccent}; ${tokens.textFieldBackgroundColor}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -74,76 +117,76 @@ export const config = { ${tokens.textFieldBackgroundSuccessColor}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -152,12 +195,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -167,12 +210,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -198,30 +241,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}:0.82rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; @@ -239,46 +282,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -289,25 +332,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -318,12 +361,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -333,12 +376,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -369,30 +412,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -410,46 +453,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -460,25 +503,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -489,12 +532,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -504,12 +547,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -540,30 +583,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -581,46 +624,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -631,25 +674,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -660,12 +703,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -675,12 +718,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -711,30 +754,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -752,46 +795,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -802,25 +845,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -831,12 +874,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -846,12 +889,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -882,30 +925,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -923,46 +966,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -973,25 +1016,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -1008,12 +1051,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1022,7 +1065,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1033,12 +1076,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1047,15 +1090,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1068,12 +1111,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1092,12 +1135,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1116,15 +1159,15 @@ export const config = { readOnly: { true: css` ${tokens.backgroundReadOnly}: transparent; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-bizcom/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-bizcom/src/components/DatePicker/DatePicker.config.ts index aba695d13e2..2011f12be67 100644 --- a/packages/sdds-bizcom/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-bizcom/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,110 +51,110 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -121,12 +163,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -136,12 +178,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -165,30 +207,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -206,46 +248,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -256,25 +298,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -285,12 +327,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -300,12 +342,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -335,30 +377,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -376,46 +418,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -426,25 +468,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -455,12 +497,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -470,12 +512,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -505,30 +547,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -546,46 +588,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -596,25 +638,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -625,12 +667,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -640,12 +682,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -675,30 +717,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -716,46 +758,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -766,25 +808,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -795,12 +837,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -810,12 +852,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -845,30 +887,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -886,46 +928,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -936,25 +978,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -971,12 +1013,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -985,7 +1027,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -996,12 +1038,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1010,15 +1052,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1031,12 +1073,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1055,12 +1097,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1078,16 +1120,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-bizcom/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/sdds-bizcom/src/components/DateTimePicker/DateTimePicker.config.ts index 6ac3406a0e3..fc105584223 100644 --- a/packages/sdds-bizcom/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/sdds-bizcom/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,91 +52,91 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -113,30 +155,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -146,12 +188,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -168,46 +210,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.875rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.875rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.875rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -218,13 +260,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; @@ -237,21 +279,21 @@ export const config = { ${tokens.timePickerItemHeight}: 4rem; ${tokens.timePickerItemBorderRadius}: 0.875rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -272,30 +314,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -305,12 +347,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -327,46 +369,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +419,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; @@ -396,21 +438,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3.5rem; ${tokens.timePickerItemBorderRadius}: 0.75rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -431,30 +473,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +506,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -486,46 +528,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -536,13 +578,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; @@ -555,21 +597,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3rem; ${tokens.timePickerItemBorderRadius}: 0.625rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyM.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyM.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyM.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -590,30 +632,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -623,12 +665,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -645,46 +687,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -695,13 +737,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -714,21 +756,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -749,30 +791,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -782,12 +824,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -804,46 +846,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -854,13 +896,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -873,21 +915,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -962,12 +1004,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -976,7 +1018,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -987,12 +1029,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1001,7 +1043,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -1011,12 +1053,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-bizcom/src/components/Divider/Divider.config.ts b/packages/sdds-bizcom/src/components/Divider/Divider.config.ts index df0449d5c06..8702d6344fa 100644 --- a/packages/sdds-bizcom/src/components/Divider/Divider.config.ts +++ b/packages/sdds-bizcom/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/sdds-bizcom/src/components/Drawer/Drawer.config.ts b/packages/sdds-bizcom/src/components/Drawer/Drawer.config.ts index b0b00b15040..78592f20493 100644 --- a/packages/sdds-bizcom/src/components/Drawer/Drawer.config.ts +++ b/packages/sdds-bizcom/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/sdds-bizcom/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-bizcom/src/components/Dropdown/Dropdown.config.ts index f14dd28fbd7..d94437d5fe0 100644 --- a/packages/sdds-bizcom/src/components/Dropdown/Dropdown.config.ts +++ b/packages/sdds-bizcom/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,11 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -24,12 +32,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.5rem; ${tokens.dividerMarginBottomTight}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -37,12 +45,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.padding}: 0.125rem; @@ -61,12 +69,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -74,12 +82,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.padding}: 0.125rem; @@ -98,12 +106,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -111,12 +119,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 0.125rem; @@ -135,12 +143,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -148,12 +156,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.padding}: 0.125rem; @@ -172,12 +180,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.125rem; ${tokens.dividerMarginBottomTight}: 0.125rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -185,18 +193,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-bizcom/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..ff9e0622e69 100644 --- a/packages/sdds-bizcom/src/components/Dropzone/Dropzone.config.ts +++ b/packages/sdds-bizcom/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-bizcom/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/sdds-bizcom/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..00f868acaa0 100644 --- a/packages/sdds-bizcom/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/sdds-bizcom/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/EmptyState/EmptyState.config.ts b/packages/sdds-bizcom/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..c6b8faa73ef 100644 --- a/packages/sdds-bizcom/src/components/EmptyState/EmptyState.config.ts +++ b/packages/sdds-bizcom/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/File/File.config.ts b/packages/sdds-bizcom/src/components/File/File.config.ts index 455a87f891b..b77893c2810 100644 --- a/packages/sdds-bizcom/src/components/File/File.config.ts +++ b/packages/sdds-bizcom/src/components/File/File.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, fileTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +24,36 @@ export const config = { variations: { view: { default: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-secondary); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textSecondary}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-solid-default); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; `, negative: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-negative); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textNegative}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-negative); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceNegative}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-negative); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceNegative}; `, }, size: { @@ -52,19 +68,19 @@ export const config = { ${tokens.cellGap}: 0.75rem; ${tokens.cellPaddingRightContent}: 0.75rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -94,19 +110,19 @@ export const config = { ${tokens.cellGap}: 0.625rem; ${tokens.cellPaddingRightContent}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -136,19 +152,19 @@ export const config = { ${tokens.cellGap}: 0.5rem; ${tokens.cellPaddingRightContent}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -178,19 +194,19 @@ export const config = { ${tokens.cellGap}: 0.375rem; ${tokens.cellPaddingRightContent}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 24; ${tokens.progressBarCircularHeight}: 1.5rem; diff --git a/packages/sdds-bizcom/src/components/IconButton/IconButton.config.ts b/packages/sdds-bizcom/src/components/IconButton/IconButton.config.ts index 9d760c4f3f2..4756d5cd388 100644 --- a/packages/sdds-bizcom/src/components/IconButton/IconButton.config.ts +++ b/packages/sdds-bizcom/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,74 +49,74 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -85,12 +125,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 4rem; ${iconButtonTokens.iconButtonPadding}: 1.75rem; ${iconButtonTokens.iconButtonRadius}: 1rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -100,12 +140,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3.5rem; ${iconButtonTokens.iconButtonPadding}: 1.5rem; ${iconButtonTokens.iconButtonRadius}: 0.875rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -115,12 +155,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -130,12 +170,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -145,12 +185,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -163,7 +203,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/sdds-bizcom/src/components/InformationWrapper/InformationWrapper.config.ts index 45b90809f49..a0640ed715f 100644 --- a/packages/sdds-bizcom/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/sdds-bizcom/src/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,18 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,50 +23,50 @@ export const config = { variations: { view: { default: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { l: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; @@ -63,29 +78,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -95,12 +110,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, m: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; @@ -112,29 +127,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -144,12 +159,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, s: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -161,29 +176,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -193,12 +208,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, xs: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; @@ -210,29 +225,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -244,10 +259,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -260,12 +275,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -284,12 +299,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; diff --git a/packages/sdds-bizcom/src/components/LinkButton/LinkButton.config.ts b/packages/sdds-bizcom/src/components/LinkButton/LinkButton.config.ts index 65d6cd4557f..ba05b52f62d 100644 --- a/packages/sdds-bizcom/src/components/LinkButton/LinkButton.config.ts +++ b/packages/sdds-bizcom/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +38,70 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, }, size: { @@ -79,12 +109,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 4rem; ${linkButtonTokens.linkButtonPadding}: 1.25rem 0; ${linkButtonTokens.linkButtonRadius}: 1rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.5rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -98,12 +128,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3.5rem; ${linkButtonTokens.linkButtonPadding}: 1rem 0; ${linkButtonTokens.linkButtonRadius}: 0.875rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -117,12 +147,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -136,12 +166,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -155,12 +185,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -174,12 +204,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 1.5rem; ${linkButtonTokens.linkButtonPadding}: 0.375rem 0; ${linkButtonTokens.linkButtonRadius}: 0.375rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 0.75rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/sdds-bizcom/src/components/List/List.config.ts b/packages/sdds-bizcom/src/components/List/List.config.ts index b0a7acc37b0..9737eae3ff5 100644 --- a/packages/sdds-bizcom/src/components/List/List.config.ts +++ b/packages/sdds-bizcom/src/components/List/List.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +17,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +38,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${listTokens.listItemFontFamily}: ${bodyXS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyXS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyXS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyXS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${listTokens.listItemPaddingTop}: 0.689rem; @@ -46,12 +55,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -63,12 +72,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -80,12 +89,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, xl: css` ${listTokens.listItemPaddingTop}: 1.3125rem; @@ -97,12 +106,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-bizcom/src/components/Loader/Loader.config.ts b/packages/sdds-bizcom/src/components/Loader/Loader.config.ts index 25fef650be1..603cf260a80 100644 --- a/packages/sdds-bizcom/src/components/Loader/Loader.config.ts +++ b/packages/sdds-bizcom/src/components/Loader/Loader.config.ts @@ -1,3 +1,30 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + overlaySoft, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, loaderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +35,67 @@ export const config = { variations: { view: { default: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-solid-default); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceSolidDefault}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-primary); + ${loaderTokens.spinnerColor}: ${textPrimary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, secondary: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceTransparentSecondary}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-secondary); + ${loaderTokens.spinnerColor}: ${textSecondary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, accent: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-accent); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceAccent}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-accent); + ${loaderTokens.spinnerColor}: ${textAccent}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, positive: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-positive); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfacePositive}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-positive); + ${loaderTokens.spinnerColor}: ${textPositive}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, warning: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-warning); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceWarning}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-warning); + ${loaderTokens.spinnerColor}: ${textWarning}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, negative: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-negative); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceNegative}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-negative); + ${loaderTokens.spinnerColor}: ${textNegative}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, info: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-info); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceInfo}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-info); + ${loaderTokens.spinnerColor}: ${textInfo}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, }, size: { @@ -81,12 +108,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 8rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h2.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h2.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h2.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h2Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h2.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h2.lineHeight}; ${loaderTokens.spinnerSize}: 8rem; `, @@ -99,12 +126,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 5.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h5.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h5.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h5.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h5Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h5.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h5.lineHeight}; ${loaderTokens.spinnerSize}: 5.5rem; `, @@ -117,12 +144,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyL.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyL.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyL.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyL.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyL.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyL.lineHeight}; ${loaderTokens.spinnerSize}: 3.5rem; `, @@ -135,12 +162,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyM.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyM.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyM.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyM.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyM.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyM.lineHeight}; ${loaderTokens.spinnerSize}: 3rem; `, @@ -153,12 +180,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 2.25rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyS.lineHeight}; ${loaderTokens.spinnerSize}: 2.25rem; `, @@ -171,12 +198,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXS.lineHeight}; ${loaderTokens.spinnerSize}: 1.5rem; `, @@ -189,12 +216,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXXS.lineHeight}; ${loaderTokens.spinnerSize}: 1rem; `, diff --git a/packages/sdds-bizcom/src/components/Modal/Modal.config.ts b/packages/sdds-bizcom/src/components/Modal/Modal.config.ts index 8b107b98ea3..fab23555682 100644 --- a/packages/sdds-bizcom/src/components/Modal/Modal.config.ts +++ b/packages/sdds-bizcom/src/components/Modal/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,16 +16,16 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Note/Note.config.ts b/packages/sdds-bizcom/src/components/Note/Note.config.ts index ee26ef2fea1..2deba1c948b 100644 --- a/packages/sdds-bizcom/src/components/Note/Note.config.ts +++ b/packages/sdds-bizcom/src/components/Note/Note.config.ts @@ -1,3 +1,23 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textL, + textLBold, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textWarning, + textXS, + textXSBold, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +28,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -46,19 +66,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 2rem; ${tokens.fixedContentBeforePadding}: 0.25rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.titleFontFamily}: ${textL.fontFamily}; + ${tokens.titleFontSize}: ${textL.fontSize}; + ${tokens.titleFontStyle}: ${textL.fontStyle}; + ${tokens.titleFontWeight}: ${textLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textL.letterSpacing}; + ${tokens.titleLineHeight}: ${textL.lineHeight}; - ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.textFontFamily}: ${textL.fontFamily}; + ${tokens.textFontSize}: ${textL.fontSize}; + ${tokens.textFontStyle}: ${textL.fontStyle}; + ${tokens.textFontWeight}: ${textL.fontWeight}; + ${tokens.textLetterSpacing}: ${textL.letterSpacing}; + ${tokens.textLineHeight}: ${textL.lineHeight}; `, m: css` ${tokens.padding}: 1.25rem 1.5rem; @@ -72,19 +92,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -98,19 +118,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.titleFontFamily}: ${textS.fontFamily}; + ${tokens.titleFontSize}: ${textS.fontSize}; + ${tokens.titleFontStyle}: ${textS.fontStyle}; + ${tokens.titleFontWeight}: ${textSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; + ${tokens.titleLineHeight}: ${textS.lineHeight}; - ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.textFontFamily}: ${textS.fontFamily}; + ${tokens.textFontSize}: ${textS.fontSize}; + ${tokens.textFontStyle}: ${textS.fontStyle}; + ${tokens.textFontWeight}: ${textS.fontWeight}; + ${tokens.textLetterSpacing}: ${textS.letterSpacing}; + ${tokens.textLineHeight}: ${textS.lineHeight}; `, xs: css` ${tokens.padding}: 0.75rem 1rem; @@ -124,19 +144,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.titleFontFamily}: ${textXS.fontFamily}; + ${tokens.titleFontSize}: ${textXS.fontSize}; + ${tokens.titleFontStyle}: ${textXS.fontStyle}; + ${tokens.titleFontWeight}: ${textXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.titleLineHeight}: ${textXS.lineHeight}; - ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.textFontFamily}: ${textXS.fontFamily}; + ${tokens.textFontSize}: ${textXS.fontSize}; + ${tokens.textFontStyle}: ${textXS.fontStyle}; + ${tokens.textFontWeight}: ${textXS.fontWeight}; + ${tokens.textLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.textLineHeight}: ${textXS.lineHeight}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Notification/Notification.config.ts b/packages/sdds-bizcom/src/components/Notification/Notification.config.ts index 3963e77e1e2..dda95127082 100644 --- a/packages/sdds-bizcom/src/components/Notification/Notification.config.ts +++ b/packages/sdds-bizcom/src/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +20,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +52,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +106,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +160,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +214,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +268,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/sdds-bizcom/src/components/NumberInput/NumberInput.config.ts b/packages/sdds-bizcom/src/components/NumberInput/NumberInput.config.ts index e55e70fd713..47c3ba431a5 100644 --- a/packages/sdds-bizcom/src/components/NumberInput/NumberInput.config.ts +++ b/packages/sdds-bizcom/src/components/NumberInput/NumberInput.config.ts @@ -1,3 +1,40 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseSurfaceTransparentSecondary, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextTertiary, + onDarkSurfaceTransparentSecondary, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextTertiary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,26 +47,26 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-solid-default); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${inverseSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceSolidDefault}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -37,26 +74,26 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, secondary: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.iconButtonColorSolidActive}: var(--text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -64,27 +101,27 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, accent: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--inverse-text-primary); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--on-dark-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--on-dark-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-accent); - - ${tokens.iconButtonColor}: var(--on-dark-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-accent); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${inverseTextPrimary}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${onDarkTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${onDarkTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${onDarkSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceAccent}; + + ${tokens.iconButtonColor}: ${onDarkTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${onDarkTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${onDarkTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -92,25 +129,25 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, clear: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; ${tokens.backgroundColorSolid}: transparent; - ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonColor}: ${textPrimary}; ${tokens.iconButtonBackgroundColor}: transparent; - ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; ${tokens.iconButtonBackgroundColorHover}: transparent; - ${tokens.iconButtonColorActive}: var(--text-primary-active); + ${tokens.iconButtonColorActive}: ${textPrimaryActive}; ${tokens.iconButtonBackgroundColorActive}: transparent; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -125,12 +162,12 @@ export const config = { ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${tokens.iconButtonRadius}: 0.875rem; ${tokens.iconButtonSegmentationRadius}: 0.375rem; @@ -140,12 +177,12 @@ export const config = { ${tokens.textWrapperHeight}: 3.5rem; ${tokens.textWrapperPadding}: 1.063rem 1.125rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -157,12 +194,12 @@ export const config = { ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -172,12 +209,12 @@ export const config = { ${tokens.textWrapperHeight}: 3rem; ${tokens.textWrapperPadding}: 0.875rem 1rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -189,12 +226,12 @@ export const config = { ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 1rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.625rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -204,12 +241,12 @@ export const config = { ${tokens.textWrapperHeight}: 2.5rem; ${tokens.textWrapperPadding}: 0.688rem 0.875rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -221,12 +258,12 @@ export const config = { ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.75rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${tokens.iconButtonRadius}: 0.5rem; ${tokens.iconButtonSegmentationRadius}: 0.125rem; @@ -236,12 +273,12 @@ export const config = { ${tokens.textWrapperHeight}: 2rem; ${tokens.textWrapperPadding}: 0.563rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -257,8 +294,8 @@ export const config = { }, inputBackgroundType: { fill: css` - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimary}; `, clear: css` ${tokens.backgroundColor}: transparent; diff --git a/packages/sdds-bizcom/src/components/Pagination/Pagination.config.ts b/packages/sdds-bizcom/src/components/Pagination/Pagination.config.ts index 5b9af725836..e78800bdd18 100644 --- a/packages/sdds-bizcom/src/components/Pagination/Pagination.config.ts +++ b/packages/sdds-bizcom/src/components/Pagination/Pagination.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,129 +39,129 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; ${paginationTokens.inputBorderColor}:transparent; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, }, size: { l: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-l-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-l-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-l-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-l-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyL.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyL.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyL.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyLBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyL.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyL.lineHeight}; ${paginationTokens.buttonHeight}: 3.5rem; ${paginationTokens.buttonWidth}: 3rem; @@ -167,12 +197,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, m: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; @@ -208,12 +238,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; @@ -249,12 +279,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, xs: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-xs-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-xs-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-xs-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyXS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyXS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyXS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyXSBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyXS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyXS.lineHeight}; ${paginationTokens.buttonHeight}: 2rem; ${paginationTokens.paginationInputWidth}: 2.5rem; diff --git a/packages/sdds-bizcom/src/components/Popover/Popover.config.ts b/packages/sdds-bizcom/src/components/Popover/Popover.config.ts index 2f9acaf14e8..f9fb4c1c0b3 100644 --- a/packages/sdds-bizcom/src/components/Popover/Popover.config.ts +++ b/packages/sdds-bizcom/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Progress/Progress.config.ts b/packages/sdds-bizcom/src/components/Progress/Progress.config.ts index a103dc32807..307c99a2558 100644 --- a/packages/sdds-bizcom/src/components/Progress/Progress.config.ts +++ b/packages/sdds-bizcom/src/components/Progress/Progress.config.ts @@ -1,3 +1,14 @@ +import { + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +19,39 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, primary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, success: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, error: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/sdds-bizcom/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/sdds-bizcom/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index 6a6449f99a4..05a6d8d063f 100644 --- a/packages/sdds-bizcom/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/sdds-bizcom/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +70,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -63,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -76,12 +96,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -89,12 +109,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -102,12 +122,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -115,12 +135,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -128,12 +148,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Radiobox/Radiobox.config.ts b/packages/sdds-bizcom/src/components/Radiobox/Radiobox.config.ts index d5fc23d48b3..224d51f3f3c 100644 --- a/packages/sdds-bizcom/src/components/Radiobox/Radiobox.config.ts +++ b/packages/sdds-bizcom/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,18 +37,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,18 +60,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${radioboxTokens.margin}: 0; @@ -66,19 +82,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.625rem; ${radioboxTokens.contentTopOffset}: 0.0625rem; ${radioboxTokens.contentLeftOffset}: 0.75rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyL.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -86,74 +102,74 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${radioboxTokens.fillColor}: var(--text-primary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPrimary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${radioboxTokens.fillColor}: var(--text-secondary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textSecondary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${radioboxTokens.fillColor}: var(--text-tertiary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textTertiary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${radioboxTokens.fillColor}: var(--text-paragraph); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textParagraph}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${radioboxTokens.fillColor}: var(--text-positive); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPositive}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${radioboxTokens.fillColor}: var(--text-warning); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textWarning}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated negative: css` - ${radioboxTokens.fillColor}: var(--text-negative); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textNegative}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -164,7 +180,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Range/Range.clear.config.ts b/packages/sdds-bizcom/src/components/Range/Range.clear.config.ts index 53faca3d526..5f65ef92587 100644 --- a/packages/sdds-bizcom/src/components/Range/Range.clear.config.ts +++ b/packages/sdds-bizcom/src/components/Range/Range.clear.config.ts @@ -1,3 +1,31 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -14,57 +42,57 @@ export const config = { ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); - - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldBackgroundColorHover}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -75,15 +103,15 @@ export const config = { ${tokens.textFieldBackgroundSuccessColorHover}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; `, }, size: { @@ -91,12 +119,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.5rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -104,24 +132,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -139,22 +167,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -168,12 +196,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -181,24 +209,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -216,22 +244,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -245,12 +273,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -258,24 +286,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -293,22 +321,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -322,12 +350,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -335,24 +363,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -370,22 +398,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -399,12 +427,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -412,24 +440,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -447,22 +475,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -475,10 +503,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -491,12 +519,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -515,12 +543,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -538,16 +566,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Range/Range.config.ts b/packages/sdds-bizcom/src/components/Range/Range.config.ts index af1793bb835..70189d39ffb 100644 --- a/packages/sdds-bizcom/src/components/Range/Range.config.ts +++ b/packages/sdds-bizcom/src/components/Range/Range.config.ts @@ -1,3 +1,32 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,55 +39,55 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorHover}: var(--surface-transparent-negative-hover); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorHover}: var(--surface-transparent-positive-hover); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -66,12 +95,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -79,24 +108,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 4rem; @@ -114,22 +143,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -142,12 +171,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -155,24 +184,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -190,22 +219,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -218,12 +247,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -231,24 +260,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -266,22 +295,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -294,12 +323,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -307,24 +336,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -342,22 +371,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -370,12 +399,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -383,24 +412,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -418,22 +447,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -445,10 +474,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -461,12 +490,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -485,12 +514,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -508,16 +537,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Rating/Rating.config.ts b/packages/sdds-bizcom/src/components/Rating/Rating.config.ts index 79e9f36f886..bc0338bf025 100644 --- a/packages/sdds-bizcom/src/components/Rating/Rating.config.ts +++ b/packages/sdds-bizcom/src/components/Rating/Rating.config.ts @@ -1,3 +1,36 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + bodyXXS, + bodyXXSBold, + dsplL, + dsplLBold, + dsplM, + dsplMBold, + dsplS, + dsplSBold, + h1, + h1Bold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +41,36 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; // TODO: change with token data-yellow, when it will be added to theme ${tokens.iconColor}: #F3A912; - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { l: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -48,19 +81,19 @@ export const config = { m: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -71,19 +104,19 @@ export const config = { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -94,19 +127,19 @@ export const config = { xs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.iconMarginBottom}: 0.125rem; ${tokens.contentGap}: 0.375rem; @@ -121,19 +154,19 @@ export const config = { xxs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.fontFamily}: ${bodyXXS.fontFamily}; + ${tokens.fontSize}: ${bodyXXS.fontSize}; + ${tokens.fontStyle}: ${bodyXXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.contentGap}: 0.375rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -146,19 +179,19 @@ export const config = { h1: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tokens.fontFamily}: ${h1.fontFamily}; + ${tokens.fontSize}: ${h1.fontSize}; + ${tokens.fontStyle}: ${h1.fontStyle}; + ${tokens.fontWeight}: ${h1Bold.fontWeight}; + ${tokens.letterSpacing}: ${h1.letterSpacing}; + ${tokens.lineHeight}: ${h1.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.helperTextFontFamily}: ${bodyM.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyM.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyM.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyM.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyM.lineHeight}; ${tokens.contentGap}: 1rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -177,19 +210,19 @@ export const config = { h2: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tokens.fontFamily}: ${h2.fontFamily}; + ${tokens.fontSize}: ${h2.fontSize}; + ${tokens.fontStyle}: ${h2.fontStyle}; + ${tokens.fontWeight}: ${h2Bold.fontWeight}; + ${tokens.letterSpacing}: ${h2.letterSpacing}; + ${tokens.lineHeight}: ${h2.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.875rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -208,19 +241,19 @@ export const config = { h3: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.fontFamily}: ${h3.fontFamily}; + ${tokens.fontSize}: ${h3.fontSize}; + ${tokens.fontStyle}: ${h3.fontStyle}; + ${tokens.fontWeight}: ${h3Bold.fontWeight}; + ${tokens.letterSpacing}: ${h3.letterSpacing}; + ${tokens.lineHeight}: ${h3.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.75rem; ${tokens.singleIconContentGap}: 0.375rem; @@ -239,19 +272,19 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.fontFamily}: ${h4.fontFamily}; + ${tokens.fontSize}: ${h4.fontSize}; + ${tokens.fontStyle}: ${h4.fontStyle}; + ${tokens.fontWeight}: ${h4Bold.fontWeight}; + ${tokens.letterSpacing}: ${h4.letterSpacing}; + ${tokens.lineHeight}: ${h4.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -270,19 +303,19 @@ export const config = { h5: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.fontFamily}: ${h5.fontFamily}; + ${tokens.fontSize}: ${h5.fontSize}; + ${tokens.fontStyle}: ${h5.fontStyle}; + ${tokens.fontWeight}: ${h5Bold.fontWeight}; + ${tokens.letterSpacing}: ${h5.letterSpacing}; + ${tokens.lineHeight}: ${h5.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -301,19 +334,19 @@ export const config = { h6: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tokens.fontFamily}: ${h6.fontFamily}; + ${tokens.fontSize}: ${h6.fontSize}; + ${tokens.fontStyle}: ${h6.fontStyle}; + ${tokens.fontWeight}: ${h6Bold.fontWeight}; + ${tokens.letterSpacing}: ${h6.letterSpacing}; + ${tokens.lineHeight}: ${h6.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -332,19 +365,19 @@ export const config = { displayL: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${tokens.fontFamily}: ${dsplL.fontFamily}; + ${tokens.fontSize}: ${dsplL.fontSize}; + ${tokens.fontStyle}: ${dsplL.fontStyle}; + ${tokens.fontWeight}: ${dsplLBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplL.letterSpacing}; + ${tokens.lineHeight}: ${dsplL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.helperTextFontFamily}: ${h3.fontFamily}; + ${tokens.helperTextFontSize}: ${h3.fontSize}; + ${tokens.helperTextFontStyle}: ${h3.fontStyle}; + ${tokens.helperTextFontWeight}: ${h3.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing}; + ${tokens.helperTextLineHeight}: ${h3.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -363,19 +396,19 @@ export const config = { displayM: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${tokens.fontFamily}: ${dsplM.fontFamily}; + ${tokens.fontSize}: ${dsplM.fontSize}; + ${tokens.fontStyle}: ${dsplM.fontStyle}; + ${tokens.fontWeight}: ${dsplMBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplM.letterSpacing}; + ${tokens.lineHeight}: ${dsplM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -394,19 +427,19 @@ export const config = { displayS: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${dsplS.fontFamily}; + ${tokens.fontSize}: ${dsplS.fontSize}; + ${tokens.fontStyle}: ${dsplS.fontStyle}; + ${tokens.fontWeight}: ${dsplSBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplS.letterSpacing}; + ${tokens.lineHeight}: ${dsplS.lineHeight}; + + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; diff --git a/packages/sdds-bizcom/src/components/Segment/SegmentGroup.config.ts b/packages/sdds-bizcom/src/components/Segment/SegmentGroup.config.ts index b03cb7140c7..df3084a2235 100644 --- a/packages/sdds-bizcom/src/components/Segment/SegmentGroup.config.ts +++ b/packages/sdds-bizcom/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +9,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -74,7 +75,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary}; `, }, orientation: { diff --git a/packages/sdds-bizcom/src/components/Segment/SegmentItem.config.ts b/packages/sdds-bizcom/src/components/Segment/SegmentItem.config.ts index 550c948b39d..21fedb9421a 100644 --- a/packages/sdds-bizcom/src/components/Segment/SegmentItem.config.ts +++ b/packages/sdds-bizcom/src/components/Segment/SegmentItem.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,68 +32,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -83,12 +107,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${segmentTokens.itemBorderRadius}: 0.625rem; @@ -100,12 +124,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -117,12 +141,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, l: css` ${segmentTokens.itemBorderRadius}: 0.875rem; @@ -134,12 +158,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, xl: css` ${segmentTokens.itemBorderRadius}: 1rem; @@ -151,12 +175,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-bizcom/src/components/Select/Select.config.ts b/packages/sdds-bizcom/src/components/Select/Select.config.ts index 8757252fb41..144c681f84a 100644 --- a/packages/sdds-bizcom/src/components/Select/Select.config.ts +++ b/packages/sdds-bizcom/src/components/Select/Select.config.ts @@ -1,3 +1,75 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + onLightTextSecondaryActive, + onLightTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,328 +82,328 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, accent: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-accent); - ${tokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-accent-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceAccent}; + ${tokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, secondary: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, clear: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-active); - ${tokens.buttonBackgroundColor}: var(--surface-clear); - ${tokens.buttonBackgroundColorHover}: var(--surface-clear); - ${tokens.buttonBackgroundColorActive}: var(--surface-clear); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryActive}; + ${tokens.buttonBackgroundColor}: ${surfaceClear}; + ${tokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${tokens.buttonBackgroundColorActive}: ${surfaceClear}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, dark: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-transparent-deep); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceTransparentDeep}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceTransparentDeepHover}; + ${tokens.buttonBackgroundColorActive}:${onLightSurfaceTransparentDeepActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, black: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, white: css` - ${tokens.buttonColor}: var(--on-light-text-primary); - ${tokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-light-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-light-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-light-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-light-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-dark-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); - - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onLightTextPrimary}; + ${tokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onLightTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onLightTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onLightTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onLightTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onDarkSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onDarkSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}:${onDarkSurfaceSolidDefaultActive}; + + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -351,20 +423,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -372,12 +444,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -400,12 +472,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; ${tokens.targetHeight}: 3.5rem; @@ -431,19 +503,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -476,20 +548,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -497,12 +569,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -525,12 +597,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -556,19 +628,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -601,20 +673,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -622,12 +694,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -650,12 +722,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; @@ -681,19 +753,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -726,20 +798,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -747,12 +819,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -775,12 +847,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2rem; @@ -806,19 +878,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -838,69 +910,69 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--on-dark-text-primary); - ${tokens.textFieldChipColorHover}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${onDarkTextPrimary}; + ${tokens.textFieldChipColorHover}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -913,12 +985,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -937,12 +1009,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -962,12 +1034,12 @@ export const config = { true: css` ${tokens.disclosureIconOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-bizcom/src/components/Skeleton/LineSkeleton.config.ts index 75d2ee7a606..6227bda40a3 100644 --- a/packages/sdds-bizcom/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-bizcom/src/components/Skeleton/LineSkeleton.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + dsplL, + dsplM, + dsplS, + h1, + h2, + h3, + h4, + h5, + h6, + surfaceSkeletonDeepGradient, + surfaceSkeletonGradient, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textL, + textM, + textS, + textXS, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, skeletonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,88 +32,88 @@ export const config = { variations: { view: { default: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient, var(--surface-skeleton-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, lighter: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient-lighter, var(--surface-skeleton-deep-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonDeepGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, }, size: { bodyL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size); + ${skeletonTokens.lineHeight}: ${bodyL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyL.fontSize}; `, bodyM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size); + ${skeletonTokens.lineHeight}: ${bodyM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyM.fontSize}; `, bodyS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size); + ${skeletonTokens.lineHeight}: ${bodyS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyS.fontSize}; `, bodyXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXS.fontSize}; `, bodyXXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXXS.fontSize}; `, dsplL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size); + ${skeletonTokens.lineHeight}: ${dsplL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplL.fontSize}; `, dsplM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size); + ${skeletonTokens.lineHeight}: ${dsplM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplM.fontSize}; `, dsplS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size); + ${skeletonTokens.lineHeight}: ${dsplS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplS.fontSize}; `, h1: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size); + ${skeletonTokens.lineHeight}: ${h1.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h1.fontSize}; `, h2: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size); + ${skeletonTokens.lineHeight}: ${h2.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h2.fontSize}; `, h3: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size); + ${skeletonTokens.lineHeight}: ${h3.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h3.fontSize}; `, h4: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size); + ${skeletonTokens.lineHeight}: ${h4.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h4.fontSize}; `, h5: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); + ${skeletonTokens.lineHeight}: ${h5.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h5.fontSize}; `, h6: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + ${skeletonTokens.lineHeight}: ${h6.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h6.fontSize}; `, textL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); + ${skeletonTokens.lineHeight}: ${textL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textL.fontSize}; `, textM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size); + ${skeletonTokens.lineHeight}: ${textM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textM.fontSize}; `, textS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size); + ${skeletonTokens.lineHeight}: ${textS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textS.fontSize}; `, textXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size); + ${skeletonTokens.lineHeight}: ${textXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textXS.fontSize}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Slider/Slider.config.ts b/packages/sdds-bizcom/src/components/Slider/Slider.config.ts index c171f134490..5b2e4ecd66d 100644 --- a/packages/sdds-bizcom/src/components/Slider/Slider.config.ts +++ b/packages/sdds-bizcom/src/components/Slider/Slider.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + surfaceAccent, + surfaceAccentGradient, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +25,70 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, gradient: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent-gradient); + ${sliderTokens.fillColor}: ${surfaceAccentGradient}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, }, size: { @@ -85,24 +102,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -119,12 +136,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -136,24 +153,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -170,12 +187,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -187,24 +204,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -221,12 +238,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-bizcom/src/components/Steps/Steps.config.ts b/packages/sdds-bizcom/src/components/Steps/Steps.config.ts index ee1ee5e1e98..a7b4e7d92aa 100644 --- a/packages/sdds-bizcom/src/components/Steps/Steps.config.ts +++ b/packages/sdds-bizcom/src/components/Steps/Steps.config.ts @@ -1,42 +1,72 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -47,10 +77,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -60,26 +90,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -100,33 +130,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.5rem; ${tokens.largeBulletIndentHeight}: 1.25rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyL.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyM.fontFamily}; + ${tokens.contentFontSize}: ${bodyM.fontSize}; + ${tokens.contentFontStyle}: ${bodyM.fontStyle}; + ${tokens.contentFontWeight}: ${bodyM.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyM.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -147,33 +177,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -194,33 +224,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -241,33 +271,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 0.75rem; ${tokens.largeBulletIndentHeight}: 0.5rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -278,8 +308,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/sdds-bizcom/src/components/Switch/Switch.config.ts b/packages/sdds-bizcom/src/components/Switch/Switch.config.ts index 8a08bd686d8..285b496d0bb 100644 --- a/packages/sdds-bizcom/src/components/Switch/Switch.config.ts +++ b/packages/sdds-bizcom/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,50 +24,50 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -83,17 +96,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -104,7 +117,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Table/Table.config.ts b/packages/sdds-bizcom/src/components/Table/Table.config.ts index 770fa22b6d8..b0bec5ce62a 100644 --- a/packages/sdds-bizcom/src/components/Table/Table.config.ts +++ b/packages/sdds-bizcom/src/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + surfaceTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +28,12 @@ export const config = { }, size: { l: css` - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.headerRowHeight}: 3.125rem; ${tokens.rowHeight}: 3.125rem; @@ -31,9 +43,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.5rem; ${tokens.editableCellIconButtonWidth}: 3rem; @@ -42,18 +54,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.875rem; ${tokens.editableCellInputPadding}: 0 0.75rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.75rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.875rem; @@ -63,12 +75,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -76,20 +88,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.5rem 0.875rem; ${tokens.selectControlPanelGap}: 0.5rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight}; `, m: css` - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.headerRowHeight}: 2.75rem; ${tokens.rowHeight}: 2.75rem; @@ -99,9 +111,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.375rem; ${tokens.editableCellIconButtonWidth}: 2.5rem; @@ -110,18 +122,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.625rem; ${tokens.editableCellInputPadding}: 0 0.625rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.75rem; @@ -131,12 +143,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -144,20 +156,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.75rem; ${tokens.selectControlPanelGap}: 0.625rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, s: css` - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.headerRowHeight}: 2.125rem; ${tokens.rowHeight}: 2.125rem; @@ -167,9 +179,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.25rem; ${tokens.editableCellIconButtonWidth}: 2rem; @@ -178,18 +190,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.5rem; ${tokens.editableCellInputPadding}: 0 0.375rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.25rem 0.5rem; ${tokens.buttonHeight}: 1.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.625rem; @@ -199,12 +211,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.25rem 0 0; ${tokens.selectItemIconSize}: 1rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 0.875rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -212,12 +224,12 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.5rem; ${tokens.selectControlPanelGap}: 0.25rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 8b2e20b8ce7..5a2815ee5de 100644 --- a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,13 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,78 +18,78 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; diff --git a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index f70368f502f..dbab60132ba 100644 --- a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h1, + h2, + h3, + h4, + h5, + h6, + inverseTextPrimary, + inverseTextSecondary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,106 +34,106 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -123,12 +149,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -142,12 +168,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -161,12 +187,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -180,12 +206,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -197,12 +223,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tabsTokens.fontFamily}: ${h6.fontFamily}; + ${tabsTokens.fontSize}: ${h6.fontSize}; + ${tabsTokens.fontStyle}: ${h6.fontStyle}; + ${tabsTokens.fontWeight}: ${h6.fontWeight}; + ${tabsTokens.letterSpacing}: ${h6.letterSpacing}; + ${tabsTokens.lineHeight}: ${h6.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -214,12 +240,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -231,12 +257,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -248,12 +274,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -265,12 +291,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -282,12 +308,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts index bc3e5edf5c1..cce68733102 100644 --- a/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-bizcom/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +16,36 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-bizcom/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/sdds-bizcom/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index c1b4b62e4a1..84a69ac2462 100644 --- a/packages/sdds-bizcom/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/sdds-bizcom/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/sdds-bizcom/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-bizcom/src/components/Tabs/vertical/VerticalTabItem.config.ts index c819eeeacbd..2962e0f1bca 100644 --- a/packages/sdds-bizcom/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-bizcom/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +24,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +65,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -69,12 +85,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -89,12 +105,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -109,12 +125,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/sdds-bizcom/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/sdds-bizcom/src/components/Tabs/vertical/VerticalTabs.config.ts index 78eba3f047c..10afcfcf678 100644 --- a/packages/sdds-bizcom/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/sdds-bizcom/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-bizcom/src/components/TextArea/TextArea.clear.config.ts b/packages/sdds-bizcom/src/components/TextArea/TextArea.clear.config.ts index 87abb38a0d7..8506762c5c0 100644 --- a/packages/sdds-bizcom/src/components/TextArea/TextArea.clear.config.ts +++ b/packages/sdds-bizcom/src/components/TextArea/TextArea.clear.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -19,31 +42,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` ${tokens.inputBackgroundColor}: transparent; @@ -56,31 +79,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-positive); - ${tokens.inputColorFocus}: var(--text-positive); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPositive}; + ${tokens.inputColorFocus}: ${textPositive}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` ${tokens.inputBackgroundColor}: transparent; @@ -93,31 +116,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-warning); - ${tokens.inputColorFocus}: var(--text-warning); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textWarning}; + ${tokens.inputColorFocus}: ${textWarning}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` ${tokens.inputBackgroundColor}: transparent; @@ -130,31 +153,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-negative); - ${tokens.inputColorFocus}: var(--text-negative); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textNegative}; + ${tokens.inputColorFocus}: ${textNegative}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -184,30 +207,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -225,12 +248,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -258,30 +281,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -299,12 +322,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -332,30 +355,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -373,12 +396,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -406,30 +429,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -447,12 +470,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -480,30 +503,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -521,24 +544,24 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; ${tokens.tooltipBoxShadow}: var( --shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08) ); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -551,12 +574,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -575,12 +598,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -598,9 +621,9 @@ export const config = { }, readOnly: { true: css` - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-bizcom/src/components/TextArea/TextArea.config.ts b/packages/sdds-bizcom/src/components/TextArea/TextArea.config.ts index 9a056369045..52cbce81dc6 100644 --- a/packages/sdds-bizcom/src/components/TextArea/TextArea.config.ts +++ b/packages/sdds-bizcom/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,41 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,172 +46,172 @@ export const config = { variations: { view: { default: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-primary); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-primary); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-positive); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-positive); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-positive); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textPositive}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-warning); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-warning); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-warning); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textWarning}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-negative); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-negative); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -202,30 +240,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -243,12 +281,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.751rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -275,30 +313,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -316,12 +354,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -348,30 +386,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -391,12 +429,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -423,30 +461,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.5rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +502,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -496,30 +534,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.375rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -537,20 +575,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -563,12 +601,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -587,12 +625,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -606,18 +644,18 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/TextField/TextField.clear.config.ts b/packages/sdds-bizcom/src/components/TextField/TextField.clear.config.ts index 31d1a8122e8..b7f2679c7f7 100644 --- a/packages/sdds-bizcom/src/components/TextField/TextField.clear.config.ts +++ b/packages/sdds-bizcom/src/components/TextField/TextField.clear.config.ts @@ -1,3 +1,52 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,132 +58,132 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-positive); + ${tokens.color}: ${textPositive}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-positive); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textPositive}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-positive); - ${tokens.contentSlotColorHover}: var(--text-positive-hover); - ${tokens.contentSlotColorActive}: var(--text-positive-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPositive}; + ${tokens.contentSlotColorHover}: ${textPositiveHover}; + ${tokens.contentSlotColorActive}: ${textPositiveActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-warning); + ${tokens.color}: ${textWarning}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-warning); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textWarning}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-warning); - ${tokens.contentSlotColorHover}: var(--text-warning-hover); - ${tokens.contentSlotColorActive}: var(--text-warning-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textWarning}; + ${tokens.contentSlotColorHover}: ${textWarningHover}; + ${tokens.contentSlotColorActive}: ${textWarningActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-negative); + ${tokens.color}: ${textNegative}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-negative); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textNegative}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -151,40 +200,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -200,19 +249,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -235,40 +284,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -283,12 +332,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -311,40 +360,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -359,12 +408,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -387,40 +436,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -435,12 +484,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -463,40 +512,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -511,12 +560,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -529,126 +578,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -661,12 +710,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -685,12 +734,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -709,13 +758,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); + ${tokens.colorReadOnly}: ${textPrimary}; ${tokens.backgroundColorReadOnly}: transparent; - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-bizcom/src/components/TextField/TextField.config.ts b/packages/sdds-bizcom/src/components/TextField/TextField.config.ts index c029fa0c4a6..68d60e09786 100644 --- a/packages/sdds-bizcom/src/components/TextField/TextField.config.ts +++ b/packages/sdds-bizcom/src/components/TextField/TextField.config.ts @@ -1,3 +1,56 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,120 +62,120 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-positive); - ${tokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPositive}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-warning); - ${tokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentWarning}; + ${tokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -135,40 +188,40 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -184,19 +237,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -219,20 +272,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -240,20 +293,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -266,12 +319,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -297,20 +350,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -318,20 +371,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -344,12 +397,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -375,20 +428,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -396,20 +449,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -422,12 +475,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -453,20 +506,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -474,20 +527,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -500,12 +553,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -520,126 +573,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -652,12 +705,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -676,12 +729,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -700,13 +753,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-bizcom/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/sdds-bizcom/src/components/TextFieldGroup/TextFieldGroup.config.ts index 200d2e26ac4..de93642eab2 100644 --- a/packages/sdds-bizcom/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/sdds-bizcom/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.textFieldDefaultRadius}: 0.75rem; @@ -77,28 +78,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -111,12 +112,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -133,28 +134,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -167,12 +168,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.textFieldSegmentedRadius}: 0.125rem; @@ -189,28 +190,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -223,12 +224,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-bizcom/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts b/packages/sdds-bizcom/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts index a33164279df..aa75a613158 100644 --- a/packages/sdds-bizcom/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts +++ b/packages/sdds-bizcom/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + textAccent, + textNegative, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,10 +35,10 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -25,45 +51,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -76,45 +102,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-positive); - ${tokens.textFieldContentSlotColorHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColor}: ${textPositive}; + ${tokens.textFieldContentSlotColorHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorActive}: ${textPositiveActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-positive); + ${tokens.scaleValueColor}: ${textPositive}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -127,45 +153,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -178,50 +204,50 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-negative); + ${tokens.scaleValueColor}: ${textNegative}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -235,38 +261,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -288,12 +314,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -305,38 +331,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -358,12 +384,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -375,38 +401,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -428,12 +454,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -445,38 +471,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -498,12 +524,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -515,38 +541,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -568,20 +594,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -594,12 +620,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -618,12 +644,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -641,12 +667,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-bizcom/src/components/TextFieldSlider/TextFieldSlider.config.ts b/packages/sdds-bizcom/src/components/TextFieldSlider/TextFieldSlider.config.ts index c63635d3490..20c9cfea2b4 100644 --- a/packages/sdds-bizcom/src/components/TextFieldSlider/TextFieldSlider.config.ts +++ b/packages/sdds-bizcom/src/components/TextFieldSlider/TextFieldSlider.config.ts @@ -1,3 +1,35 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,207 +41,207 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; - ${tokens.textFieldBorderColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldBorderColorHover}: var(--text-secondary); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldBorderColorHover}: ${textSecondary}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-positive-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-warning-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -223,38 +255,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -276,12 +308,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -293,38 +325,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -346,12 +378,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -363,38 +395,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -416,12 +448,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -433,38 +465,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -486,12 +518,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -503,38 +535,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -556,20 +588,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -582,12 +614,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -606,12 +638,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -629,12 +661,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-bizcom/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-bizcom/src/components/TimePicker/TimePicker.config.ts index b86cc9da0bd..5abe84ca32b 100644 --- a/packages/sdds-bizcom/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-bizcom/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,45 +33,45 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; - ${tokens.labelColor}: var(--text-primary); + ${tokens.labelColor}: ${textPrimary}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); + ${tokens.timePickerShadow}: ${shadowDownSoftS}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -63,12 +86,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -80,12 +103,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -103,34 +126,34 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.5rem; @@ -146,12 +169,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -163,12 +186,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -186,34 +209,34 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -229,12 +252,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -246,12 +269,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -269,34 +292,34 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.813rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -312,12 +335,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -329,12 +352,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -352,34 +375,34 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -450,13 +473,13 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Toast/Toast.config.ts b/packages/sdds-bizcom/src/components/Toast/Toast.config.ts index 9678f1dd594..c16023397ab 100644 --- a/packages/sdds-bizcom/src/components/Toast/Toast.config.ts +++ b/packages/sdds-bizcom/src/components/Toast/Toast.config.ts @@ -1,3 +1,17 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,49 +23,49 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-positive); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textPositive}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-negative); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textNegative}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary); + ${toastTokens.closeIconColor}: ${onDarkTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary); + ${toastTokens.closeIconColor}: ${onLightTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextSecondary}; `, }, size: { @@ -59,12 +73,12 @@ export const config = { ${toastTokens.borderRadius}: 0.75rem; ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/sdds-bizcom/src/components/Toolbar/Toolbar.config.ts b/packages/sdds-bizcom/src/components/Toolbar/Toolbar.config.ts index 89581b0d6bf..5d5aa759368 100644 --- a/packages/sdds-bizcom/src/components/Toolbar/Toolbar.config.ts +++ b/packages/sdds-bizcom/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/sdds-bizcom/src/components/Tooltip/Tooltip.config.ts b/packages/sdds-bizcom/src/components/Tooltip/Tooltip.config.ts index 2ca59cef4c5..8591735a735 100644 --- a/packages/sdds-bizcom/src/components/Tooltip/Tooltip.config.ts +++ b/packages/sdds-bizcom/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,4 @@ +import { bodyS, bodyXS, surfaceSolidCardBrightness, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +17,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -30,7 +31,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -41,12 +42,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -55,15 +56,15 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.color}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Tree/Tree.config.ts b/packages/sdds-bizcom/src/components/Tree/Tree.config.ts index e8cbfce73a6..50683edc1a1 100644 --- a/packages/sdds-bizcom/src/components/Tree/Tree.config.ts +++ b/packages/sdds-bizcom/src/components/Tree/Tree.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,24 +24,24 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -53,12 +69,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.itemHeight}: 3.5rem; @@ -84,12 +100,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.itemHeight}: 3rem; @@ -115,12 +131,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -146,12 +162,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.itemHeight}: 2rem; @@ -177,12 +193,12 @@ export const config = { ${tokens.checkboxInnerSize}: 0.875rem; ${tokens.checkboxBorderRadius}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Typography/Body.config.ts b/packages/sdds-bizcom/src/components/Typography/Body.config.ts index 23927fdf18c..e2a96d6bd94 100644 --- a/packages/sdds-bizcom/src/components/Typography/Body.config.ts +++ b/packages/sdds-bizcom/src/components/Typography/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Typography/Dspl.config.ts b/packages/sdds-bizcom/src/components/Typography/Dspl.config.ts index 3fb1245a027..0a0cadd3558 100644 --- a/packages/sdds-bizcom/src/components/Typography/Dspl.config.ts +++ b/packages/sdds-bizcom/src/components/Typography/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +18,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +38,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +58,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Typography/Heading.config.ts b/packages/sdds-bizcom/src/components/Typography/Heading.config.ts index 77f16729129..1cf6f4c92ba 100644 --- a/packages/sdds-bizcom/src/components/Typography/Heading.config.ts +++ b/packages/sdds-bizcom/src/components/Typography/Heading.config.ts @@ -1,3 +1,23 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, + h6, + h6Bold, + h6Medium, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configH1 = { @@ -7,14 +27,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +46,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +65,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +84,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +103,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, @@ -102,14 +122,14 @@ export const configH6 = { variations: { size: { h6: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + ${typographyTokens.typoFontFamily}: ${h6.fontFamily}; + ${typographyTokens.typoFontSize}: ${h6.fontSize}; + ${typographyTokens.typoFontStyle}: ${h6.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h6.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h6Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h6Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h6.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h6.lineHeight}; `, }, }, diff --git a/packages/sdds-bizcom/src/components/Typography/Text.config.ts b/packages/sdds-bizcom/src/components/Typography/Text.config.ts index 542bc09a87d..9bde26b9694 100644 --- a/packages/sdds-bizcom/src/components/Typography/Text.config.ts +++ b/packages/sdds-bizcom/src/components/Typography/Text.config.ts @@ -1,3 +1,17 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_bizcom'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +21,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +41,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +61,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +81,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, From cd2511b5d1add8199480820a643456c2cca22148 Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 19:33:38 +0300 Subject: [PATCH 11/24] chore(sdds-crm): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 285 +++-- .../src/components/Attach/Attach.config.ts | 899 +++++++------- .../Autocomplete/Autocomplete.config.ts | 553 +++++---- .../src/components/Badge/Badge.config.ts | 148 ++- .../Breadcrumbs/Breadcrumbs.config.ts | 68 +- .../src/components/Button/Button.config.ts | 258 ++-- .../ButtonGroup/ButtonGroup.config.ts | 300 +++-- .../components/Calendar/Calendar.config.ts | 460 +++---- .../Calendar/CalendarDouble.config.ts | 460 +++---- .../src/components/Card/Card.config.ts | 3 +- .../components/Carousel/Carousel.config.ts | 24 +- .../src/components/Cell/Cell.config.ts | 169 +-- .../components/Checkbox/Checkbox.config.ts | 156 +-- .../components/ChipGroup/ChipGroup.config.ts | 102 +- .../components/CodeField/CodeField.config.ts | 85 +- .../components/Combobox/Combobox.config.ts | 753 ++++++------ .../src/components/Counter/Counter.config.ts | 103 +- .../DatePicker/DatePicker.clear.config.ts | 1035 ++++++++-------- .../DatePicker/DatePicker.config.ts | 1022 ++++++++-------- .../DateTimePicker/DateTimePicker.config.ts | 954 ++++++++------- .../src/components/Divider/Divider.config.ts | 14 +- .../src/components/Drawer/Drawer.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 132 +- .../components/Dropzone/Dropzone.config.ts | 53 +- .../EmbedIconButton/EmbedIconButton.config.ts | 125 +- .../EmptyState/EmptyState.config.ts | 49 +- .../src/components/File/File.config.ts | 158 +-- .../IconButton/IconButton.config.ts | 182 +-- .../InformationWrapper.config.ts | 295 ++--- .../LinkButton/LinkButton.config.ts | 210 ++-- .../src/components/List/List.config.ts | 77 +- .../src/components/Loader/Loader.config.ts | 181 +-- .../src/components/Modal/Modal.config.ts | 20 +- .../src/components/Note/Note.config.ts | 172 +-- .../Notification/Notification.config.ts | 196 +-- .../NumberInput/NumberInput.config.ts | 289 +++-- .../Pagination/Pagination.config.ts | 220 ++-- .../src/components/Popover/Popover.config.ts | 5 +- .../components/Progress/Progress.config.ts | 53 +- .../ProgressBarCircular.config.ts | 146 ++- .../components/Radiobox/Radiobox.config.ts | 154 +-- .../components/Range/Range.clear.config.ts | 484 ++++---- .../src/components/Range/Range.config.ts | 467 +++---- .../src/components/Rating/Rating.config.ts | 385 +++--- .../components/Scrollbar/Scrollbar.config.ts | 6 +- .../components/Segment/SegmentGroup.config.ts | 11 +- .../components/Segment/SegmentItem.config.ts | 168 +-- .../src/components/Select/Select.config.ts | 1086 +++++++++-------- .../Skeleton/LineSkeleton.config.ts | 98 +- .../src/components/Slider/Slider.config.ts | 209 ++-- .../src/components/Steps/Steps.config.ts | 332 ++--- .../src/components/Switch/Switch.config.ts | 103 +- .../src/components/Table/Table.config.ts | 180 +-- .../HorizontalIconTabItem.config.ts | 70 +- .../horizontal/HorizontalTabItem.config.ts | 258 ++-- .../Tabs/horizontal/HorizontalTabs.config.ts | 36 +- .../vertical/VerticalIconTabItem.config.ts | 23 +- .../Tabs/vertical/VerticalTabItem.config.ts | 90 +- .../Tabs/vertical/VerticalTabs.config.ts | 17 +- .../TextArea/TextArea.clear.config.ts | 443 +++---- .../components/TextArea/TextArea.config.ts | 642 +++++----- .../TextField/TextField.clear.config.ts | 789 ++++++------ .../components/TextField/TextField.config.ts | 811 ++++++------ .../TextFieldGroup/TextFieldGroup.config.ts | 193 +-- .../TimePicker/TimePicker.config.ts | 331 ++--- .../src/components/Toast/Toast.config.ts | 70 +- .../src/components/Toolbar/Toolbar.config.ts | 11 +- .../src/components/Tooltip/Tooltip.config.ts | 33 +- .../src/components/Tree/Tree.config.ts | 106 +- .../src/components/Typography/Body.config.ts | 97 +- .../src/components/Typography/Dspl.config.ts | 59 +- .../components/Typography/Heading.config.ts | 116 +- .../src/components/Typography/Text.config.ts | 78 +- 73 files changed, 9955 insertions(+), 8429 deletions(-) diff --git a/packages/sdds-crm/src/components/Accordion/Accordion.config.ts b/packages/sdds-crm/src/components/Accordion/Accordion.config.ts index d70ce2c93e6..40e06b5aec6 100644 --- a/packages/sdds-crm/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-crm/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,28 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,12 +36,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, @@ -24,14 +49,14 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -42,19 +67,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.875rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyLBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -63,19 +88,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -84,19 +109,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -105,19 +130,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXSBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.lineHeight}; `, h2: css` ${accordionTokens.accordionItemPaddingVertical}: 1rem; @@ -126,19 +151,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h2Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -147,19 +172,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 0.688rem; @@ -167,19 +192,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h5: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -187,19 +212,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h6: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -207,19 +232,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h6Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/sdds-crm/src/components/Attach/Attach.config.ts b/packages/sdds-crm/src/components/Attach/Attach.config.ts index b62ab061eec..7571af44690 100644 --- a/packages/sdds-crm/src/components/Attach/Attach.config.ts +++ b/packages/sdds-crm/src/components/Attach/Attach.config.ts @@ -1,3 +1,54 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,439 +61,439 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.buttonColorActive}: var(--text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.buttonColorHover}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.buttonColorActive}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.iconButtonColorHover}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.iconButtonColorActive}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary-hover); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.buttonColorActive}: var(--text-primary-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColorHover}: ${textPrimaryHover}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.buttonColorActive}: ${textPrimaryActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary-hover); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonColorActive}: var(--text-primary-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonColorActive}: ${textPrimaryActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, success: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-positive); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfacePositive}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, warning: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-warning); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceWarning}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, critical: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-negative); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceNegative}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-negative-active); - - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; + + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, dark: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, black: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, white: css` - ${attachTokens.buttonColor}: var(--on-light-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.buttonColor}: ${onLightTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -457,12 +508,12 @@ export const config = { ${attachTokens.buttonWidth}: 12.5rem; ${attachTokens.buttonPadding}: 1.5rem; ${attachTokens.buttonRadius}: 0.875rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyL.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -481,37 +532,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonHeight}: 3.5rem; ${attachTokens.iconButtonWidth}: 3.5rem; ${attachTokens.iconButtonPadding}: 1.5rem; ${attachTokens.iconButtonRadius}: 0.875rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -520,12 +571,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -547,12 +598,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -571,37 +622,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -610,12 +661,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -637,12 +688,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -661,37 +712,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -700,12 +751,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -727,12 +778,12 @@ export const config = { ${attachTokens.buttonWidth}: 10rem; ${attachTokens.buttonPadding}: 0.75rem; ${attachTokens.buttonRadius}: 0.5rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -751,37 +802,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.25rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2rem; ${attachTokens.iconButtonWidth}: 2rem; ${attachTokens.iconButtonPadding}: 0.75rem; ${attachTokens.iconButtonRadius}: 0.5rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -790,12 +841,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/sdds-crm/src/components/Autocomplete/Autocomplete.config.ts b/packages/sdds-crm/src/components/Autocomplete/Autocomplete.config.ts index 445f4504839..2a763d3549d 100644 --- a/packages/sdds-crm/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/sdds-crm/src/components/Autocomplete/Autocomplete.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,172 +40,172 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-positive); - ${tokens.textFieldDividerColorHover}: var(--surface-positive); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfacePositive}; + ${tokens.textFieldDividerColorHover}: ${surfacePositive}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-warning); - ${tokens.textFieldDividerColorHover}: var(--surface-warning); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceWarning}; + ${tokens.textFieldDividerColorHover}: ${surfaceWarning}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--surface-negative); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${surfaceNegative}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, }, size: { @@ -193,21 +224,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -215,12 +246,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -240,12 +271,12 @@ export const config = { ${tokens.itemPadding}: 1.0625rem 1rem; ${tokens.itemBorderRadius}: 0.75rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; ${tokens.emptyStateGap}: 0.5rem; @@ -268,21 +299,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -290,12 +321,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -315,12 +346,12 @@ export const config = { ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; ${tokens.emptyStateGap}: 0.375rem; @@ -343,21 +374,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -365,12 +396,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -390,12 +421,12 @@ export const config = { ${tokens.itemPadding}: 0.6875rem 0.75rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -418,21 +449,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -440,12 +471,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -465,12 +496,12 @@ export const config = { ${tokens.itemPadding}: 0.5625rem 0.5rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; ${tokens.emptyStateGap}: 0.25rem; @@ -481,22 +512,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -509,12 +540,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -533,12 +564,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -556,14 +587,14 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary}; `, }, }, diff --git a/packages/sdds-crm/src/components/Badge/Badge.config.ts b/packages/sdds-crm/src/components/Badge/Badge.config.ts index 3d8e8df196e..a47bee3ef43 100644 --- a/packages/sdds-crm/src/components/Badge/Badge.config.ts +++ b/packages/sdds-crm/src/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +36,67 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -78,12 +106,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -97,12 +125,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -116,12 +144,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -135,12 +163,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -159,7 +187,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/sdds-crm/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/sdds-crm/src/components/Breadcrumbs/Breadcrumbs.config.ts index 1661a5df0e3..b0fe1a3175c 100644 --- a/packages/sdds-crm/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/sdds-crm/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,53 +20,53 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { l: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.5rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-l-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-l-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-l-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-l-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-l-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight}; `, m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${breadcrumbsTokens.breadcrumbsGap}: 0rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-xs-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-xs-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-xs-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-xs-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-xs-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-crm/src/components/Button/Button.config.ts b/packages/sdds-crm/src/components/Button/Button.config.ts index 5d4e666a7b9..013dcdb0683 100644 --- a/packages/sdds-crm/src/components/Button/Button.config.ts +++ b/packages/sdds-crm/src/components/Button/Button.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,104 +53,104 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -115,12 +159,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.75rem; ${buttonTokens.buttonRadius}: 1rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.5rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -136,12 +180,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 0.875rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -157,12 +201,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -178,12 +222,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -199,12 +243,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -220,12 +264,12 @@ export const config = { ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: 0.375rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 0.75rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -244,7 +288,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/sdds-crm/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/sdds-crm/src/components/ButtonGroup/ButtonGroup.config.ts index 38cdcc186d3..ecc7ff832f3 100644 --- a/packages/sdds-crm/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/sdds-crm/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,124 +56,124 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, success: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; `, }, size: { @@ -136,12 +184,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 4rem; ${buttonGroupTokens.buttonPadding}: 1.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, l: css` ${buttonGroupTokens.buttonDefaultRadius}: 0.875rem; @@ -150,12 +198,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3.5rem; ${buttonGroupTokens.buttonPadding}: 1.5rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, m: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -165,12 +213,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -179,12 +227,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -193,12 +241,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -207,12 +255,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 1.5rem; ${buttonGroupTokens.buttonPadding}: 0.625rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-crm/src/components/Calendar/Calendar.config.ts b/packages/sdds-crm/src/components/Calendar/Calendar.config.ts index fc0a15388db..da43596a01d 100644 --- a/packages/sdds-crm/src/components/Calendar/Calendar.config.ts +++ b/packages/sdds-crm/src/components/Calendar/Calendar.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,38 +35,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -51,46 +77,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +126,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 4rem; ${calendarBaseTokens.iconButtonWidth}: 4rem; @@ -120,46 +146,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -169,13 +195,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3.5rem; ${calendarBaseTokens.iconButtonWidth}: 3.5rem; @@ -189,46 +215,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -238,13 +264,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -258,46 +284,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -307,13 +333,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -327,46 +353,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -376,13 +402,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; @@ -400,12 +426,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -414,7 +440,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -425,12 +451,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -439,7 +465,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-crm/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-crm/src/components/Calendar/CalendarDouble.config.ts index 70c9a8be880..23f5b901cfe 100644 --- a/packages/sdds-crm/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-crm/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,39 +35,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -52,46 +78,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +127,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 4rem; ${calendarDoubleTokens.iconButtonWidth}: 4rem; @@ -121,46 +147,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -170,13 +196,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; @@ -190,46 +216,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -239,13 +265,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -259,46 +285,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -308,13 +334,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -328,46 +354,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +403,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; @@ -401,12 +427,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -415,7 +441,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -426,12 +452,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -440,7 +466,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-crm/src/components/Card/Card.config.ts b/packages/sdds-crm/src/components/Card/Card.config.ts index 2899613fb13..4b0decd0086 100644 --- a/packages/sdds-crm/src/components/Card/Card.config.ts +++ b/packages/sdds-crm/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,7 +9,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/sdds-crm/src/components/Carousel/Carousel.config.ts b/packages/sdds-crm/src/components/Carousel/Carousel.config.ts index f3fd82e4491..7450532849a 100644 --- a/packages/sdds-crm/src/components/Carousel/Carousel.config.ts +++ b/packages/sdds-crm/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +16,14 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary); - ${tokens.paginationDotActiveBackground}: var(--surface-solid-default); - ${tokens.controlIconButtonColor}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.controlIconButtonColorHover}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.controlIconButtonColorActive}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary}; + ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault}; + ${tokens.controlIconButtonColor}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.controlIconButtonColorHover}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.controlIconButtonColorActive}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, }, size: { diff --git a/packages/sdds-crm/src/components/Cell/Cell.config.ts b/packages/sdds-crm/src/components/Cell/Cell.config.ts index 6588088c11f..dce052decd4 100644 --- a/packages/sdds-crm/src/components/Cell/Cell.config.ts +++ b/packages/sdds-crm/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -87,26 +88,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -119,26 +120,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-crm/src/components/Checkbox/Checkbox.config.ts b/packages/sdds-crm/src/components/Checkbox/Checkbox.config.ts index 53d71aca8ad..36972bf261e 100644 --- a/packages/sdds-crm/src/components/Checkbox/Checkbox.config.ts +++ b/packages/sdds-crm/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,18 +33,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -39,18 +55,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${checkboxTokens.margin}: 0; @@ -60,91 +76,91 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.125rem; ${checkboxTokens.contentTopOffset}: 0.0625rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyL.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${checkboxTokens.fillColor}: var(--text-primary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPrimary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${checkboxTokens.fillColor}: var(--text-secondary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textSecondary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${checkboxTokens.fillColor}: var(--text-tertiary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textTertiary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${checkboxTokens.fillColor}: var(--text-paragraph); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textParagraph}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${checkboxTokens.fillColor}: var(--text-positive); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPositive}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${checkboxTokens.fillColor}: var(--text-warning); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textWarning}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, negative: css` - ${checkboxTokens.fillColor}: var(--text-negative); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textNegative}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-negative); + ${checkboxTokens.triggerBorderColor}: ${textNegative}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -155,7 +171,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-crm/src/components/ChipGroup/ChipGroup.config.ts b/packages/sdds-crm/src/components/ChipGroup/ChipGroup.config.ts index 2bed06ad8c0..13f6f01ecb9 100644 --- a/packages/sdds-crm/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/sdds-crm/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +26,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +57,12 @@ export const config = { ${tokens.chipHeight}: 3rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.5rem; @@ -60,12 +78,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -81,12 +99,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; @@ -102,12 +120,12 @@ export const config = { ${tokens.chipHeight}: 1.5rem; ${tokens.chipPadding}: 0 0.625rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/sdds-crm/src/components/CodeField/CodeField.config.ts b/packages/sdds-crm/src/components/CodeField/CodeField.config.ts index d0109404d66..4822e68ea7f 100644 --- a/packages/sdds-crm/src/components/CodeField/CodeField.config.ts +++ b/packages/sdds-crm/src/components/CodeField/CodeField.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodyXS, + outlineAccent, + surfaceAccent, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, codeFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,19 +26,19 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--surface-accent); + ${tokens.caretColor}: ${surfaceAccent}; - ${tokens.captionColor}: var(--text-secondary); - ${tokens.captionColorError}: var(--text-negative); + ${tokens.captionColor}: ${textSecondary}; + ${tokens.captionColorError}: ${textNegative}; - ${tokens.codeColor}: var(--text-primary); - ${tokens.codeColorError}: var(--text-negative); - ${tokens.borderColorFocus}: var(--outline-accent); + ${tokens.codeColor}: ${textPrimary}; + ${tokens.codeColorError}: ${textNegative}; + ${tokens.borderColorFocus}: ${outlineAccent}; - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; `, }, size: { @@ -34,19 +51,19 @@ export const config = { ${tokens.codeItemWidth}: 2.75rem; ${tokens.codeItemHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.captionFontFamily}: ${bodyS.fontFamily}; + ${tokens.captionFontSize}: ${bodyS.fontSize}; + ${tokens.captionFontStyle}: ${bodyS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyS.lineHeight}; ${tokens.borderRadius}: 0.875rem; ${tokens.borderRadiusSegmented}: 0.375rem; @@ -61,19 +78,19 @@ export const config = { ${tokens.codeItemWidth}: 2.375rem; ${tokens.codeItemHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.captionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.captionFontSize}: ${bodyXS.fontSize}; + ${tokens.captionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyXS.lineHeight}; ${tokens.borderRadius}: 0.75rem; ${tokens.borderRadiusSegmented}: 0.25rem; diff --git a/packages/sdds-crm/src/components/Combobox/Combobox.config.ts b/packages/sdds-crm/src/components/Combobox/Combobox.config.ts index 9b023838c5d..d72231a52a4 100644 --- a/packages/sdds-crm/src/components/Combobox/Combobox.config.ts +++ b/packages/sdds-crm/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,221 +40,221 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -243,20 +274,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -264,12 +295,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -292,12 +323,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 1rem; ${tokens.padding}: 0.125rem; @@ -319,19 +350,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -364,20 +395,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -385,12 +416,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -413,12 +444,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -440,19 +471,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -485,20 +516,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -506,12 +537,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -534,12 +565,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 0.625rem 0.875rem 0.625rem 0.875rem; ${tokens.padding}: 0.125rem; @@ -561,19 +592,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -606,20 +637,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -627,12 +658,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -655,12 +686,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 0.5rem 0.625rem 0.5rem 0.625rem; ${tokens.padding}: 0.125rem; @@ -682,19 +713,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -714,22 +745,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -742,12 +773,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -766,12 +797,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -789,13 +820,13 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-crm/src/components/Counter/Counter.config.ts b/packages/sdds-crm/src/components/Counter/Counter.config.ts index 140aa43a57f..bf0c13fd131 100644 --- a/packages/sdds-crm/src/components/Counter/Counter.config.ts +++ b/packages/sdds-crm/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,32 +23,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -41,56 +56,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-crm/src/components/DatePicker/DatePicker.clear.config.ts b/packages/sdds-crm/src/components/DatePicker/DatePicker.clear.config.ts index c2e334a638a..c6ba9f0cf18 100644 --- a/packages/sdds-crm/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/sdds-crm/src/components/DatePicker/DatePicker.clear.config.ts @@ -1,3 +1,46 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,64 +51,64 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); + ${tokens.outlineFocusColor}: ${surfaceAccent}; ${tokens.background}: transparent; ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.focusColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.focusColor}: ${textAccent}; ${tokens.textFieldBackgroundColor}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -74,76 +117,76 @@ export const config = { ${tokens.textFieldBackgroundSuccessColor}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -152,12 +195,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -167,12 +210,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -198,30 +241,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}:0.82rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; @@ -239,46 +282,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -289,25 +332,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -318,12 +361,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -333,12 +376,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -369,30 +412,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -410,46 +453,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -460,25 +503,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -489,12 +532,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -504,12 +547,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -540,30 +583,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -581,46 +624,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -631,25 +674,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -660,12 +703,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -675,12 +718,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -711,30 +754,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -752,46 +795,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -802,25 +845,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -831,12 +874,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -846,12 +889,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -882,30 +925,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -923,46 +966,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -973,25 +1016,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -1008,12 +1051,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1022,7 +1065,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1033,12 +1076,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1047,15 +1090,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1068,12 +1111,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1092,12 +1135,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1116,15 +1159,15 @@ export const config = { readOnly: { true: css` ${tokens.backgroundReadOnly}: transparent; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-crm/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-crm/src/components/DatePicker/DatePicker.config.ts index aba695d13e2..6109f4466df 100644 --- a/packages/sdds-crm/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-crm/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,110 +51,110 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -121,12 +163,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -136,12 +178,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -165,30 +207,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -206,46 +248,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -256,25 +298,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -285,12 +327,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -300,12 +342,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -335,30 +377,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -376,46 +418,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -426,25 +468,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -455,12 +497,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -470,12 +512,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -505,30 +547,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -546,46 +588,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -596,25 +638,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -625,12 +667,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -640,12 +682,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -675,30 +717,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -716,46 +758,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -766,25 +808,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -795,12 +837,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -810,12 +852,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -845,30 +887,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -886,46 +928,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -936,25 +978,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -971,12 +1013,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -985,7 +1027,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -996,12 +1038,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1010,15 +1052,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1031,12 +1073,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1055,12 +1097,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1078,16 +1120,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-crm/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/sdds-crm/src/components/DateTimePicker/DateTimePicker.config.ts index 6ac3406a0e3..24bd26065b8 100644 --- a/packages/sdds-crm/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/sdds-crm/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,91 +52,91 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -113,30 +155,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -146,12 +188,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -168,46 +210,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.875rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.875rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.875rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -218,13 +260,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; @@ -237,21 +279,21 @@ export const config = { ${tokens.timePickerItemHeight}: 4rem; ${tokens.timePickerItemBorderRadius}: 0.875rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -272,30 +314,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -305,12 +347,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -327,46 +369,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +419,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; @@ -396,21 +438,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3.5rem; ${tokens.timePickerItemBorderRadius}: 0.75rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -431,30 +473,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +506,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -486,46 +528,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -536,13 +578,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; @@ -555,21 +597,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3rem; ${tokens.timePickerItemBorderRadius}: 0.625rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyM.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyM.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyM.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -590,30 +632,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -623,12 +665,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -645,46 +687,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -695,13 +737,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -714,21 +756,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -749,30 +791,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -782,12 +824,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -804,46 +846,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -854,13 +896,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -873,21 +915,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -962,12 +1004,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -976,7 +1018,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -987,12 +1029,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1001,7 +1043,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -1011,12 +1053,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-crm/src/components/Divider/Divider.config.ts b/packages/sdds-crm/src/components/Divider/Divider.config.ts index df0449d5c06..0b7cd3030de 100644 --- a/packages/sdds-crm/src/components/Divider/Divider.config.ts +++ b/packages/sdds-crm/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/sdds-crm/src/components/Drawer/Drawer.config.ts b/packages/sdds-crm/src/components/Drawer/Drawer.config.ts index b0b00b15040..b2e308a2382 100644 --- a/packages/sdds-crm/src/components/Drawer/Drawer.config.ts +++ b/packages/sdds-crm/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/sdds-crm/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-crm/src/components/Dropdown/Dropdown.config.ts index f14dd28fbd7..b48a7723cec 100644 --- a/packages/sdds-crm/src/components/Dropdown/Dropdown.config.ts +++ b/packages/sdds-crm/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,11 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -24,12 +32,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.5rem; ${tokens.dividerMarginBottomTight}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -37,12 +45,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.padding}: 0.125rem; @@ -61,12 +69,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -74,12 +82,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.padding}: 0.125rem; @@ -98,12 +106,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -111,12 +119,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 0.125rem; @@ -135,12 +143,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -148,12 +156,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.padding}: 0.125rem; @@ -172,12 +180,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.125rem; ${tokens.dividerMarginBottomTight}: 0.125rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -185,18 +193,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/sdds-crm/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-crm/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..f973db9c843 100644 --- a/packages/sdds-crm/src/components/Dropzone/Dropzone.config.ts +++ b/packages/sdds-crm/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-crm/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/sdds-crm/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..995c4ff1f56 100644 --- a/packages/sdds-crm/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/sdds-crm/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-crm/src/components/EmptyState/EmptyState.config.ts b/packages/sdds-crm/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..71eb1cefbaa 100644 --- a/packages/sdds-crm/src/components/EmptyState/EmptyState.config.ts +++ b/packages/sdds-crm/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-crm/src/components/File/File.config.ts b/packages/sdds-crm/src/components/File/File.config.ts index 455a87f891b..d3782b80aeb 100644 --- a/packages/sdds-crm/src/components/File/File.config.ts +++ b/packages/sdds-crm/src/components/File/File.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, fileTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +24,36 @@ export const config = { variations: { view: { default: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-secondary); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textSecondary}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-solid-default); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; `, negative: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-negative); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textNegative}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-negative); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceNegative}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-negative); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceNegative}; `, }, size: { @@ -52,19 +68,19 @@ export const config = { ${tokens.cellGap}: 0.75rem; ${tokens.cellPaddingRightContent}: 0.75rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -94,19 +110,19 @@ export const config = { ${tokens.cellGap}: 0.625rem; ${tokens.cellPaddingRightContent}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -136,19 +152,19 @@ export const config = { ${tokens.cellGap}: 0.5rem; ${tokens.cellPaddingRightContent}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -178,19 +194,19 @@ export const config = { ${tokens.cellGap}: 0.375rem; ${tokens.cellPaddingRightContent}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 24; ${tokens.progressBarCircularHeight}: 1.5rem; diff --git a/packages/sdds-crm/src/components/IconButton/IconButton.config.ts b/packages/sdds-crm/src/components/IconButton/IconButton.config.ts index 9d760c4f3f2..d7a4ad4f9c4 100644 --- a/packages/sdds-crm/src/components/IconButton/IconButton.config.ts +++ b/packages/sdds-crm/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,74 +49,74 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -85,12 +125,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 4rem; ${iconButtonTokens.iconButtonPadding}: 1.75rem; ${iconButtonTokens.iconButtonRadius}: 1rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -100,12 +140,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3.5rem; ${iconButtonTokens.iconButtonPadding}: 1.5rem; ${iconButtonTokens.iconButtonRadius}: 0.875rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -115,12 +155,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -130,12 +170,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -145,12 +185,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -163,7 +203,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-crm/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/sdds-crm/src/components/InformationWrapper/InformationWrapper.config.ts index 45b90809f49..ddebbdb449a 100644 --- a/packages/sdds-crm/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/sdds-crm/src/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,18 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,50 +23,50 @@ export const config = { variations: { view: { default: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { l: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; @@ -63,29 +78,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -95,12 +110,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, m: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; @@ -112,29 +127,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -144,12 +159,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, s: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -161,29 +176,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -193,12 +208,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, xs: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; @@ -210,29 +225,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -244,10 +259,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -260,12 +275,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -284,12 +299,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; diff --git a/packages/sdds-crm/src/components/LinkButton/LinkButton.config.ts b/packages/sdds-crm/src/components/LinkButton/LinkButton.config.ts index 65d6cd4557f..216133464e0 100644 --- a/packages/sdds-crm/src/components/LinkButton/LinkButton.config.ts +++ b/packages/sdds-crm/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +38,70 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, }, size: { @@ -79,12 +109,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 4rem; ${linkButtonTokens.linkButtonPadding}: 1.25rem 0; ${linkButtonTokens.linkButtonRadius}: 1rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.5rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -98,12 +128,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3.5rem; ${linkButtonTokens.linkButtonPadding}: 1rem 0; ${linkButtonTokens.linkButtonRadius}: 0.875rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -117,12 +147,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -136,12 +166,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -155,12 +185,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -174,12 +204,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 1.5rem; ${linkButtonTokens.linkButtonPadding}: 0.375rem 0; ${linkButtonTokens.linkButtonRadius}: 0.375rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 0.75rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/sdds-crm/src/components/List/List.config.ts b/packages/sdds-crm/src/components/List/List.config.ts index b0a7acc37b0..1a6a8f57ca1 100644 --- a/packages/sdds-crm/src/components/List/List.config.ts +++ b/packages/sdds-crm/src/components/List/List.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +17,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +38,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${listTokens.listItemFontFamily}: ${bodyXS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyXS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyXS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyXS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${listTokens.listItemPaddingTop}: 0.689rem; @@ -46,12 +55,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -63,12 +72,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -80,12 +89,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, xl: css` ${listTokens.listItemPaddingTop}: 1.3125rem; @@ -97,12 +106,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-crm/src/components/Loader/Loader.config.ts b/packages/sdds-crm/src/components/Loader/Loader.config.ts index 25fef650be1..587a5bcb58c 100644 --- a/packages/sdds-crm/src/components/Loader/Loader.config.ts +++ b/packages/sdds-crm/src/components/Loader/Loader.config.ts @@ -1,3 +1,30 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + overlaySoft, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, loaderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +35,67 @@ export const config = { variations: { view: { default: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-solid-default); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceSolidDefault}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-primary); + ${loaderTokens.spinnerColor}: ${textPrimary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, secondary: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceTransparentSecondary}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-secondary); + ${loaderTokens.spinnerColor}: ${textSecondary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, accent: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-accent); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceAccent}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-accent); + ${loaderTokens.spinnerColor}: ${textAccent}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, positive: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-positive); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfacePositive}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-positive); + ${loaderTokens.spinnerColor}: ${textPositive}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, warning: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-warning); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceWarning}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-warning); + ${loaderTokens.spinnerColor}: ${textWarning}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, negative: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-negative); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceNegative}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-negative); + ${loaderTokens.spinnerColor}: ${textNegative}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, info: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-info); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceInfo}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-info); + ${loaderTokens.spinnerColor}: ${textInfo}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, }, size: { @@ -81,12 +108,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 8rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h2.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h2.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h2.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h2Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h2.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h2.lineHeight}; ${loaderTokens.spinnerSize}: 8rem; `, @@ -99,12 +126,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 5.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h5.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h5.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h5.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h5Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h5.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h5.lineHeight}; ${loaderTokens.spinnerSize}: 5.5rem; `, @@ -117,12 +144,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyL.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyL.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyL.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyL.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyL.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyL.lineHeight}; ${loaderTokens.spinnerSize}: 3.5rem; `, @@ -135,12 +162,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyM.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyM.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyM.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyM.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyM.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyM.lineHeight}; ${loaderTokens.spinnerSize}: 3rem; `, @@ -153,12 +180,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 2.25rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyS.lineHeight}; ${loaderTokens.spinnerSize}: 2.25rem; `, @@ -171,12 +198,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXS.lineHeight}; ${loaderTokens.spinnerSize}: 1.5rem; `, @@ -189,12 +216,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXXS.lineHeight}; ${loaderTokens.spinnerSize}: 1rem; `, diff --git a/packages/sdds-crm/src/components/Modal/Modal.config.ts b/packages/sdds-crm/src/components/Modal/Modal.config.ts index 8b107b98ea3..63477a32b61 100644 --- a/packages/sdds-crm/src/components/Modal/Modal.config.ts +++ b/packages/sdds-crm/src/components/Modal/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,16 +16,16 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-crm/src/components/Note/Note.config.ts b/packages/sdds-crm/src/components/Note/Note.config.ts index 309162ad36a..357611a7407 100644 --- a/packages/sdds-crm/src/components/Note/Note.config.ts +++ b/packages/sdds-crm/src/components/Note/Note.config.ts @@ -1,3 +1,25 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textL, + textLBold, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textSecondary, + textSecondaryHover, + textWarning, + textXS, + textXSBold, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +30,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -44,8 +66,8 @@ export const config = { ${tokens.closeIconTop}: 1rem; ${tokens.closeIconRight}: 1rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -53,19 +75,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 2rem; ${tokens.fixedContentBeforePadding}: 0.25rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height); - - ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.titleFontFamily}: ${textL.fontFamily}; + ${tokens.titleFontSize}: ${textL.fontSize}; + ${tokens.titleFontStyle}: ${textL.fontStyle}; + ${tokens.titleFontWeight}: ${textLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textL.letterSpacing}; + ${tokens.titleLineHeight}: ${textL.lineHeight}; + + ${tokens.textFontFamily}: ${textL.fontFamily}; + ${tokens.textFontSize}: ${textL.fontSize}; + ${tokens.textFontStyle}: ${textL.fontStyle}; + ${tokens.textFontWeight}: ${textL.fontWeight}; + ${tokens.textLetterSpacing}: ${textL.letterSpacing}; + ${tokens.textLineHeight}: ${textL.lineHeight}; `, m: css` ${tokens.padding}: 1.25rem 1.5rem; @@ -77,8 +99,8 @@ export const config = { ${tokens.closeIconTop}: 0.75rem; ${tokens.closeIconRight}: 0.75rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -86,19 +108,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); - - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; + + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -110,8 +132,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -119,19 +141,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height); - - ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.titleFontFamily}: ${textS.fontFamily}; + ${tokens.titleFontSize}: ${textS.fontSize}; + ${tokens.titleFontStyle}: ${textS.fontStyle}; + ${tokens.titleFontWeight}: ${textSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; + ${tokens.titleLineHeight}: ${textS.lineHeight}; + + ${tokens.textFontFamily}: ${textS.fontFamily}; + ${tokens.textFontSize}: ${textS.fontSize}; + ${tokens.textFontStyle}: ${textS.fontStyle}; + ${tokens.textFontWeight}: ${textS.fontWeight}; + ${tokens.textLetterSpacing}: ${textS.letterSpacing}; + ${tokens.textLineHeight}: ${textS.lineHeight}; `, xs: css` ${tokens.padding}: 0.75rem 1rem; @@ -143,8 +165,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1rem; ${tokens.closeIconButtonSize}: 1rem; @@ -152,19 +174,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height); - - ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.titleFontFamily}: ${textXS.fontFamily}; + ${tokens.titleFontSize}: ${textXS.fontSize}; + ${tokens.titleFontStyle}: ${textXS.fontStyle}; + ${tokens.titleFontWeight}: ${textXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.titleLineHeight}: ${textXS.lineHeight}; + + ${tokens.textFontFamily}: ${textXS.fontFamily}; + ${tokens.textFontSize}: ${textXS.fontSize}; + ${tokens.textFontStyle}: ${textXS.fontStyle}; + ${tokens.textFontWeight}: ${textXS.fontWeight}; + ${tokens.textLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.textLineHeight}: ${textXS.lineHeight}; `, }, }, diff --git a/packages/sdds-crm/src/components/Notification/Notification.config.ts b/packages/sdds-crm/src/components/Notification/Notification.config.ts index 3963e77e1e2..3b118730e09 100644 --- a/packages/sdds-crm/src/components/Notification/Notification.config.ts +++ b/packages/sdds-crm/src/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +20,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +52,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +106,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +160,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +214,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +268,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/sdds-crm/src/components/NumberInput/NumberInput.config.ts b/packages/sdds-crm/src/components/NumberInput/NumberInput.config.ts index e55e70fd713..fe36d0ff215 100644 --- a/packages/sdds-crm/src/components/NumberInput/NumberInput.config.ts +++ b/packages/sdds-crm/src/components/NumberInput/NumberInput.config.ts @@ -1,3 +1,40 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseSurfaceTransparentSecondary, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextTertiary, + onDarkSurfaceTransparentSecondary, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextTertiary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,26 +47,26 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-solid-default); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${inverseSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceSolidDefault}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -37,26 +74,26 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, secondary: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.iconButtonColorSolidActive}: var(--text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -64,27 +101,27 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, accent: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--inverse-text-primary); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--on-dark-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--on-dark-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-accent); - - ${tokens.iconButtonColor}: var(--on-dark-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-accent); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${inverseTextPrimary}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${onDarkTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${onDarkTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${onDarkSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceAccent}; + + ${tokens.iconButtonColor}: ${onDarkTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${onDarkTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${onDarkTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -92,25 +129,25 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, clear: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; ${tokens.backgroundColorSolid}: transparent; - ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonColor}: ${textPrimary}; ${tokens.iconButtonBackgroundColor}: transparent; - ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; ${tokens.iconButtonBackgroundColorHover}: transparent; - ${tokens.iconButtonColorActive}: var(--text-primary-active); + ${tokens.iconButtonColorActive}: ${textPrimaryActive}; ${tokens.iconButtonBackgroundColorActive}: transparent; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -125,12 +162,12 @@ export const config = { ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${tokens.iconButtonRadius}: 0.875rem; ${tokens.iconButtonSegmentationRadius}: 0.375rem; @@ -140,12 +177,12 @@ export const config = { ${tokens.textWrapperHeight}: 3.5rem; ${tokens.textWrapperPadding}: 1.063rem 1.125rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -157,12 +194,12 @@ export const config = { ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -172,12 +209,12 @@ export const config = { ${tokens.textWrapperHeight}: 3rem; ${tokens.textWrapperPadding}: 0.875rem 1rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -189,12 +226,12 @@ export const config = { ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 1rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.625rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -204,12 +241,12 @@ export const config = { ${tokens.textWrapperHeight}: 2.5rem; ${tokens.textWrapperPadding}: 0.688rem 0.875rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -221,12 +258,12 @@ export const config = { ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.75rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${tokens.iconButtonRadius}: 0.5rem; ${tokens.iconButtonSegmentationRadius}: 0.125rem; @@ -236,12 +273,12 @@ export const config = { ${tokens.textWrapperHeight}: 2rem; ${tokens.textWrapperPadding}: 0.563rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -257,8 +294,8 @@ export const config = { }, inputBackgroundType: { fill: css` - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimary}; `, clear: css` ${tokens.backgroundColor}: transparent; diff --git a/packages/sdds-crm/src/components/Pagination/Pagination.config.ts b/packages/sdds-crm/src/components/Pagination/Pagination.config.ts index 5b9af725836..8d406d06a38 100644 --- a/packages/sdds-crm/src/components/Pagination/Pagination.config.ts +++ b/packages/sdds-crm/src/components/Pagination/Pagination.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,129 +39,129 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; ${paginationTokens.inputBorderColor}:transparent; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, }, size: { l: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-l-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-l-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-l-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-l-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyL.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyL.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyL.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyLBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyL.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyL.lineHeight}; ${paginationTokens.buttonHeight}: 3.5rem; ${paginationTokens.buttonWidth}: 3rem; @@ -167,12 +197,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, m: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; @@ -208,12 +238,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; @@ -249,12 +279,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, xs: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-xs-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-xs-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-xs-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyXS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyXS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyXS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyXSBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyXS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyXS.lineHeight}; ${paginationTokens.buttonHeight}: 2rem; ${paginationTokens.paginationInputWidth}: 2.5rem; diff --git a/packages/sdds-crm/src/components/Popover/Popover.config.ts b/packages/sdds-crm/src/components/Popover/Popover.config.ts index 2f9acaf14e8..f646f695605 100644 --- a/packages/sdds-crm/src/components/Popover/Popover.config.ts +++ b/packages/sdds-crm/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/sdds-crm/src/components/Progress/Progress.config.ts b/packages/sdds-crm/src/components/Progress/Progress.config.ts index a103dc32807..32ff7e1f047 100644 --- a/packages/sdds-crm/src/components/Progress/Progress.config.ts +++ b/packages/sdds-crm/src/components/Progress/Progress.config.ts @@ -1,3 +1,14 @@ +import { + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +19,39 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, primary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, success: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, error: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/sdds-crm/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/sdds-crm/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index 6a6449f99a4..8ebd31cba60 100644 --- a/packages/sdds-crm/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/sdds-crm/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +70,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -63,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -76,12 +96,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -89,12 +109,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -102,12 +122,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -115,12 +135,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -128,12 +148,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-crm/src/components/Radiobox/Radiobox.config.ts b/packages/sdds-crm/src/components/Radiobox/Radiobox.config.ts index d5fc23d48b3..e4e6b369a66 100644 --- a/packages/sdds-crm/src/components/Radiobox/Radiobox.config.ts +++ b/packages/sdds-crm/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,18 +37,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,18 +60,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${radioboxTokens.margin}: 0; @@ -66,19 +82,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.625rem; ${radioboxTokens.contentTopOffset}: 0.0625rem; ${radioboxTokens.contentLeftOffset}: 0.75rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyL.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -86,74 +102,74 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${radioboxTokens.fillColor}: var(--text-primary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPrimary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${radioboxTokens.fillColor}: var(--text-secondary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textSecondary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${radioboxTokens.fillColor}: var(--text-tertiary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textTertiary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${radioboxTokens.fillColor}: var(--text-paragraph); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textParagraph}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${radioboxTokens.fillColor}: var(--text-positive); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPositive}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${radioboxTokens.fillColor}: var(--text-warning); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textWarning}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated negative: css` - ${radioboxTokens.fillColor}: var(--text-negative); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textNegative}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -164,7 +180,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-crm/src/components/Range/Range.clear.config.ts b/packages/sdds-crm/src/components/Range/Range.clear.config.ts index 53faca3d526..1c8b9c3a013 100644 --- a/packages/sdds-crm/src/components/Range/Range.clear.config.ts +++ b/packages/sdds-crm/src/components/Range/Range.clear.config.ts @@ -1,3 +1,31 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -14,57 +42,57 @@ export const config = { ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); - - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldBackgroundColorHover}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -75,15 +103,15 @@ export const config = { ${tokens.textFieldBackgroundSuccessColorHover}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; `, }, size: { @@ -91,12 +119,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.5rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -104,24 +132,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -139,22 +167,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -168,12 +196,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -181,24 +209,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -216,22 +244,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -245,12 +273,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -258,24 +286,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -293,22 +321,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -322,12 +350,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -335,24 +363,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -370,22 +398,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -399,12 +427,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -412,24 +440,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -447,22 +475,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -475,10 +503,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -491,12 +519,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -515,12 +543,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -538,16 +566,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-crm/src/components/Range/Range.config.ts b/packages/sdds-crm/src/components/Range/Range.config.ts index af1793bb835..1e14475c051 100644 --- a/packages/sdds-crm/src/components/Range/Range.config.ts +++ b/packages/sdds-crm/src/components/Range/Range.config.ts @@ -1,3 +1,32 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,55 +39,55 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorHover}: var(--surface-transparent-negative-hover); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorHover}: var(--surface-transparent-positive-hover); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -66,12 +95,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -79,24 +108,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 4rem; @@ -114,22 +143,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -142,12 +171,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -155,24 +184,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -190,22 +219,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -218,12 +247,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -231,24 +260,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -266,22 +295,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -294,12 +323,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -307,24 +336,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -342,22 +371,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -370,12 +399,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -383,24 +412,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -418,22 +447,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -445,10 +474,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -461,12 +490,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -485,12 +514,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -508,16 +537,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-crm/src/components/Rating/Rating.config.ts b/packages/sdds-crm/src/components/Rating/Rating.config.ts index 79e9f36f886..09dbeddd0ba 100644 --- a/packages/sdds-crm/src/components/Rating/Rating.config.ts +++ b/packages/sdds-crm/src/components/Rating/Rating.config.ts @@ -1,3 +1,36 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + bodyXXS, + bodyXXSBold, + dsplL, + dsplLBold, + dsplM, + dsplMBold, + dsplS, + dsplSBold, + h1, + h1Bold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +41,36 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; // TODO: change with token data-yellow, when it will be added to theme ${tokens.iconColor}: #F3A912; - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { l: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -48,19 +81,19 @@ export const config = { m: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -71,19 +104,19 @@ export const config = { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -94,19 +127,19 @@ export const config = { xs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.iconMarginBottom}: 0.125rem; ${tokens.contentGap}: 0.375rem; @@ -121,19 +154,19 @@ export const config = { xxs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.fontFamily}: ${bodyXXS.fontFamily}; + ${tokens.fontSize}: ${bodyXXS.fontSize}; + ${tokens.fontStyle}: ${bodyXXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.contentGap}: 0.375rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -146,19 +179,19 @@ export const config = { h1: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tokens.fontFamily}: ${h1.fontFamily}; + ${tokens.fontSize}: ${h1.fontSize}; + ${tokens.fontStyle}: ${h1.fontStyle}; + ${tokens.fontWeight}: ${h1Bold.fontWeight}; + ${tokens.letterSpacing}: ${h1.letterSpacing}; + ${tokens.lineHeight}: ${h1.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.helperTextFontFamily}: ${bodyM.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyM.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyM.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyM.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyM.lineHeight}; ${tokens.contentGap}: 1rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -177,19 +210,19 @@ export const config = { h2: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tokens.fontFamily}: ${h2.fontFamily}; + ${tokens.fontSize}: ${h2.fontSize}; + ${tokens.fontStyle}: ${h2.fontStyle}; + ${tokens.fontWeight}: ${h2Bold.fontWeight}; + ${tokens.letterSpacing}: ${h2.letterSpacing}; + ${tokens.lineHeight}: ${h2.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.875rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -208,19 +241,19 @@ export const config = { h3: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.fontFamily}: ${h3.fontFamily}; + ${tokens.fontSize}: ${h3.fontSize}; + ${tokens.fontStyle}: ${h3.fontStyle}; + ${tokens.fontWeight}: ${h3Bold.fontWeight}; + ${tokens.letterSpacing}: ${h3.letterSpacing}; + ${tokens.lineHeight}: ${h3.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.75rem; ${tokens.singleIconContentGap}: 0.375rem; @@ -239,19 +272,19 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.fontFamily}: ${h4.fontFamily}; + ${tokens.fontSize}: ${h4.fontSize}; + ${tokens.fontStyle}: ${h4.fontStyle}; + ${tokens.fontWeight}: ${h4Bold.fontWeight}; + ${tokens.letterSpacing}: ${h4.letterSpacing}; + ${tokens.lineHeight}: ${h4.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -270,19 +303,19 @@ export const config = { h5: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.fontFamily}: ${h5.fontFamily}; + ${tokens.fontSize}: ${h5.fontSize}; + ${tokens.fontStyle}: ${h5.fontStyle}; + ${tokens.fontWeight}: ${h5Bold.fontWeight}; + ${tokens.letterSpacing}: ${h5.letterSpacing}; + ${tokens.lineHeight}: ${h5.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -301,19 +334,19 @@ export const config = { h6: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tokens.fontFamily}: ${h6.fontFamily}; + ${tokens.fontSize}: ${h6.fontSize}; + ${tokens.fontStyle}: ${h6.fontStyle}; + ${tokens.fontWeight}: ${h6Bold.fontWeight}; + ${tokens.letterSpacing}: ${h6.letterSpacing}; + ${tokens.lineHeight}: ${h6.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -332,19 +365,19 @@ export const config = { displayL: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${tokens.fontFamily}: ${dsplL.fontFamily}; + ${tokens.fontSize}: ${dsplL.fontSize}; + ${tokens.fontStyle}: ${dsplL.fontStyle}; + ${tokens.fontWeight}: ${dsplLBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplL.letterSpacing}; + ${tokens.lineHeight}: ${dsplL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.helperTextFontFamily}: ${h3.fontFamily}; + ${tokens.helperTextFontSize}: ${h3.fontSize}; + ${tokens.helperTextFontStyle}: ${h3.fontStyle}; + ${tokens.helperTextFontWeight}: ${h3.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing}; + ${tokens.helperTextLineHeight}: ${h3.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -363,19 +396,19 @@ export const config = { displayM: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${tokens.fontFamily}: ${dsplM.fontFamily}; + ${tokens.fontSize}: ${dsplM.fontSize}; + ${tokens.fontStyle}: ${dsplM.fontStyle}; + ${tokens.fontWeight}: ${dsplMBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplM.letterSpacing}; + ${tokens.lineHeight}: ${dsplM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -394,19 +427,19 @@ export const config = { displayS: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${dsplS.fontFamily}; + ${tokens.fontSize}: ${dsplS.fontSize}; + ${tokens.fontStyle}: ${dsplS.fontStyle}; + ${tokens.fontWeight}: ${dsplSBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplS.letterSpacing}; + ${tokens.lineHeight}: ${dsplS.lineHeight}; + + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; diff --git a/packages/sdds-crm/src/components/Scrollbar/Scrollbar.config.ts b/packages/sdds-crm/src/components/Scrollbar/Scrollbar.config.ts index 0220aa026dc..c159b4d67a1 100644 --- a/packages/sdds-crm/src/components/Scrollbar/Scrollbar.config.ts +++ b/packages/sdds-crm/src/components/Scrollbar/Scrollbar.config.ts @@ -1,8 +1,10 @@ +import { surfaceTransparentPrimary, surfaceTransparentTertiary } from '@salutejs/sdds-themes/tokens/sdds_serv'; + export const config = { view: { default: { - trackColor: 'var(--surface-transparent-primary)', - thumbColor: 'var(--surface-transparent-tertiary)', + trackColor: surfaceTransparentPrimary, + thumbColor: surfaceTransparentTertiary, }, }, size: { diff --git a/packages/sdds-crm/src/components/Segment/SegmentGroup.config.ts b/packages/sdds-crm/src/components/Segment/SegmentGroup.config.ts index b03cb7140c7..5041af6d560 100644 --- a/packages/sdds-crm/src/components/Segment/SegmentGroup.config.ts +++ b/packages/sdds-crm/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +9,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -74,7 +75,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary}; `, }, orientation: { diff --git a/packages/sdds-crm/src/components/Segment/SegmentItem.config.ts b/packages/sdds-crm/src/components/Segment/SegmentItem.config.ts index 550c948b39d..f1c3dbe4ed7 100644 --- a/packages/sdds-crm/src/components/Segment/SegmentItem.config.ts +++ b/packages/sdds-crm/src/components/Segment/SegmentItem.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,68 +32,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -83,12 +107,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${segmentTokens.itemBorderRadius}: 0.625rem; @@ -100,12 +124,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -117,12 +141,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, l: css` ${segmentTokens.itemBorderRadius}: 0.875rem; @@ -134,12 +158,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, xl: css` ${segmentTokens.itemBorderRadius}: 1rem; @@ -151,12 +175,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-crm/src/components/Select/Select.config.ts b/packages/sdds-crm/src/components/Select/Select.config.ts index 8757252fb41..60ce5764cb3 100644 --- a/packages/sdds-crm/src/components/Select/Select.config.ts +++ b/packages/sdds-crm/src/components/Select/Select.config.ts @@ -1,3 +1,75 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + onLightTextSecondaryActive, + onLightTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,328 +82,328 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, accent: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-accent); - ${tokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-accent-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceAccent}; + ${tokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, secondary: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, clear: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-active); - ${tokens.buttonBackgroundColor}: var(--surface-clear); - ${tokens.buttonBackgroundColorHover}: var(--surface-clear); - ${tokens.buttonBackgroundColorActive}: var(--surface-clear); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryActive}; + ${tokens.buttonBackgroundColor}: ${surfaceClear}; + ${tokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${tokens.buttonBackgroundColorActive}: ${surfaceClear}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, dark: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-transparent-deep); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceTransparentDeep}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceTransparentDeepHover}; + ${tokens.buttonBackgroundColorActive}:${onLightSurfaceTransparentDeepActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, black: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, white: css` - ${tokens.buttonColor}: var(--on-light-text-primary); - ${tokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-light-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-light-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-light-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-light-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-dark-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); - - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onLightTextPrimary}; + ${tokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onLightTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onLightTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onLightTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onLightTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onDarkSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onDarkSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}:${onDarkSurfaceSolidDefaultActive}; + + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -351,20 +423,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -372,12 +444,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -400,12 +472,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; ${tokens.targetHeight}: 3.5rem; @@ -431,19 +503,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -476,20 +548,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -497,12 +569,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -525,12 +597,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -556,19 +628,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -601,20 +673,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -622,12 +694,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -650,12 +722,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; @@ -681,19 +753,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -726,20 +798,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -747,12 +819,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -775,12 +847,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2rem; @@ -806,19 +878,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -838,69 +910,69 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--on-dark-text-primary); - ${tokens.textFieldChipColorHover}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${onDarkTextPrimary}; + ${tokens.textFieldChipColorHover}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -913,12 +985,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -937,12 +1009,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -962,12 +1034,12 @@ export const config = { true: css` ${tokens.disclosureIconOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-crm/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-crm/src/components/Skeleton/LineSkeleton.config.ts index aa27b05bc9c..66e3d744126 100644 --- a/packages/sdds-crm/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-crm/src/components/Skeleton/LineSkeleton.config.ts @@ -1,3 +1,25 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + dsplL, + dsplM, + dsplS, + h1, + h2, + h3, + h4, + h5, + h6, + surfaceSkeletonDeepGradient, + surfaceSkeletonGradient, + textL, + textM, + textS, + textXS, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, skeletonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,84 +30,84 @@ export const config = { variations: { view: { default: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient, var(--surface-skeleton-gradient)); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonGradient}; `, lighter: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient-lighter, var(--surface-skeleton-deep-gradient)); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonDeepGradient}; `, }, size: { bodyL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size); + ${skeletonTokens.lineHeight}: ${bodyL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyL.fontSize}; `, bodyM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size); + ${skeletonTokens.lineHeight}: ${bodyM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyM.fontSize}; `, bodyS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size); + ${skeletonTokens.lineHeight}: ${bodyS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyS.fontSize}; `, bodyXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXS.fontSize}; `, bodyXXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXXS.fontSize}; `, dsplL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size); + ${skeletonTokens.lineHeight}: ${dsplL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplL.fontSize}; `, dsplM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size); + ${skeletonTokens.lineHeight}: ${dsplM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplM.fontSize}; `, dsplS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size); + ${skeletonTokens.lineHeight}: ${dsplS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplS.fontSize}; `, h1: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size); + ${skeletonTokens.lineHeight}: ${h1.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h1.fontSize}; `, h2: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size); + ${skeletonTokens.lineHeight}: ${h2.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h2.fontSize}; `, h3: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size); + ${skeletonTokens.lineHeight}: ${h3.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h3.fontSize}; `, h4: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size); + ${skeletonTokens.lineHeight}: ${h4.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h4.fontSize}; `, h5: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); + ${skeletonTokens.lineHeight}: ${h5.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h5.fontSize}; `, h6: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + ${skeletonTokens.lineHeight}: ${h6.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h6.fontSize}; `, textL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); + ${skeletonTokens.lineHeight}: ${textL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textL.fontSize}; `, textM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size); + ${skeletonTokens.lineHeight}: ${textM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textM.fontSize}; `, textS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size); + ${skeletonTokens.lineHeight}: ${textS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textS.fontSize}; `, textXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size); + ${skeletonTokens.lineHeight}: ${textXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textXS.fontSize}; `, }, }, diff --git a/packages/sdds-crm/src/components/Slider/Slider.config.ts b/packages/sdds-crm/src/components/Slider/Slider.config.ts index c171f134490..5bc665633d3 100644 --- a/packages/sdds-crm/src/components/Slider/Slider.config.ts +++ b/packages/sdds-crm/src/components/Slider/Slider.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + surfaceAccent, + surfaceAccentGradient, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +25,70 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, gradient: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent-gradient); + ${sliderTokens.fillColor}: ${surfaceAccentGradient}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, }, size: { @@ -85,24 +102,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -119,12 +136,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -136,24 +153,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -170,12 +187,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -187,24 +204,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -221,12 +238,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-crm/src/components/Steps/Steps.config.ts b/packages/sdds-crm/src/components/Steps/Steps.config.ts index ee1ee5e1e98..4e397229383 100644 --- a/packages/sdds-crm/src/components/Steps/Steps.config.ts +++ b/packages/sdds-crm/src/components/Steps/Steps.config.ts @@ -1,42 +1,72 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -47,10 +77,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -60,26 +90,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -100,33 +130,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.5rem; ${tokens.largeBulletIndentHeight}: 1.25rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyL.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyM.fontFamily}; + ${tokens.contentFontSize}: ${bodyM.fontSize}; + ${tokens.contentFontStyle}: ${bodyM.fontStyle}; + ${tokens.contentFontWeight}: ${bodyM.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyM.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -147,33 +177,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -194,33 +224,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -241,33 +271,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 0.75rem; ${tokens.largeBulletIndentHeight}: 0.5rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -278,8 +308,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/sdds-crm/src/components/Switch/Switch.config.ts b/packages/sdds-crm/src/components/Switch/Switch.config.ts index 8a08bd686d8..d0025e03e9c 100644 --- a/packages/sdds-crm/src/components/Switch/Switch.config.ts +++ b/packages/sdds-crm/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,50 +24,50 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -83,17 +96,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -104,7 +117,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-crm/src/components/Table/Table.config.ts b/packages/sdds-crm/src/components/Table/Table.config.ts index 770fa22b6d8..6786b878846 100644 --- a/packages/sdds-crm/src/components/Table/Table.config.ts +++ b/packages/sdds-crm/src/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + surfaceTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +28,12 @@ export const config = { }, size: { l: css` - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.headerRowHeight}: 3.125rem; ${tokens.rowHeight}: 3.125rem; @@ -31,9 +43,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.5rem; ${tokens.editableCellIconButtonWidth}: 3rem; @@ -42,18 +54,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.875rem; ${tokens.editableCellInputPadding}: 0 0.75rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.75rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.875rem; @@ -63,12 +75,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -76,20 +88,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.5rem 0.875rem; ${tokens.selectControlPanelGap}: 0.5rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight}; `, m: css` - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.headerRowHeight}: 2.75rem; ${tokens.rowHeight}: 2.75rem; @@ -99,9 +111,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.375rem; ${tokens.editableCellIconButtonWidth}: 2.5rem; @@ -110,18 +122,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.625rem; ${tokens.editableCellInputPadding}: 0 0.625rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.75rem; @@ -131,12 +143,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -144,20 +156,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.75rem; ${tokens.selectControlPanelGap}: 0.625rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, s: css` - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.headerRowHeight}: 2.125rem; ${tokens.rowHeight}: 2.125rem; @@ -167,9 +179,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.25rem; ${tokens.editableCellIconButtonWidth}: 2rem; @@ -178,18 +190,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.5rem; ${tokens.editableCellInputPadding}: 0 0.375rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.25rem 0.5rem; ${tokens.buttonHeight}: 1.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.625rem; @@ -199,12 +211,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.25rem 0 0; ${tokens.selectItemIconSize}: 1rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 0.875rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -212,12 +224,12 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.5rem; ${tokens.selectControlPanelGap}: 0.25rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 8b2e20b8ce7..2b9b12672fc 100644 --- a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,13 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,78 +18,78 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; diff --git a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index f70368f502f..293c6053c66 100644 --- a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h1, + h2, + h3, + h4, + h5, + h6, + inverseTextPrimary, + inverseTextSecondary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,106 +34,106 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -123,12 +149,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -142,12 +168,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -161,12 +187,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -180,12 +206,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -197,12 +223,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tabsTokens.fontFamily}: ${h6.fontFamily}; + ${tabsTokens.fontSize}: ${h6.fontSize}; + ${tabsTokens.fontStyle}: ${h6.fontStyle}; + ${tabsTokens.fontWeight}: ${h6.fontWeight}; + ${tabsTokens.letterSpacing}: ${h6.letterSpacing}; + ${tabsTokens.lineHeight}: ${h6.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -214,12 +240,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -231,12 +257,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -248,12 +274,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -265,12 +291,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -282,12 +308,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabs.config.ts index bc3e5edf5c1..e8f25e21954 100644 --- a/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-crm/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +16,36 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-crm/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/sdds-crm/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index c1b4b62e4a1..c8b864479eb 100644 --- a/packages/sdds-crm/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/sdds-crm/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/sdds-crm/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-crm/src/components/Tabs/vertical/VerticalTabItem.config.ts index c819eeeacbd..3ac4be1e321 100644 --- a/packages/sdds-crm/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-crm/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +24,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +65,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -69,12 +85,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -89,12 +105,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -109,12 +125,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/sdds-crm/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/sdds-crm/src/components/Tabs/vertical/VerticalTabs.config.ts index 78eba3f047c..dca88d1b56f 100644 --- a/packages/sdds-crm/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/sdds-crm/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-crm/src/components/TextArea/TextArea.clear.config.ts b/packages/sdds-crm/src/components/TextArea/TextArea.clear.config.ts index 87abb38a0d7..f6d221b6c73 100644 --- a/packages/sdds-crm/src/components/TextArea/TextArea.clear.config.ts +++ b/packages/sdds-crm/src/components/TextArea/TextArea.clear.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -19,31 +42,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` ${tokens.inputBackgroundColor}: transparent; @@ -56,31 +79,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-positive); - ${tokens.inputColorFocus}: var(--text-positive); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPositive}; + ${tokens.inputColorFocus}: ${textPositive}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` ${tokens.inputBackgroundColor}: transparent; @@ -93,31 +116,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-warning); - ${tokens.inputColorFocus}: var(--text-warning); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textWarning}; + ${tokens.inputColorFocus}: ${textWarning}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` ${tokens.inputBackgroundColor}: transparent; @@ -130,31 +153,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-negative); - ${tokens.inputColorFocus}: var(--text-negative); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textNegative}; + ${tokens.inputColorFocus}: ${textNegative}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -184,30 +207,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -225,12 +248,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -258,30 +281,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -299,12 +322,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -332,30 +355,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -373,12 +396,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -406,30 +429,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -447,12 +470,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -480,30 +503,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -521,24 +544,24 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; ${tokens.tooltipBoxShadow}: var( --shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08) ); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -551,12 +574,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -575,12 +598,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -598,9 +621,9 @@ export const config = { }, readOnly: { true: css` - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-crm/src/components/TextArea/TextArea.config.ts b/packages/sdds-crm/src/components/TextArea/TextArea.config.ts index 9a056369045..023753e0cef 100644 --- a/packages/sdds-crm/src/components/TextArea/TextArea.config.ts +++ b/packages/sdds-crm/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,41 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,172 +46,172 @@ export const config = { variations: { view: { default: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-primary); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-primary); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-positive); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-positive); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-positive); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textPositive}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-warning); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-warning); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-warning); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textWarning}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-negative); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-negative); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -202,30 +240,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -243,12 +281,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.751rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -275,30 +313,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -316,12 +354,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -348,30 +386,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -391,12 +429,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -423,30 +461,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.5rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +502,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -496,30 +534,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.375rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -537,20 +575,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -563,12 +601,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -587,12 +625,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -606,18 +644,18 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-crm/src/components/TextField/TextField.clear.config.ts b/packages/sdds-crm/src/components/TextField/TextField.clear.config.ts index 31d1a8122e8..2b4e6430ca8 100644 --- a/packages/sdds-crm/src/components/TextField/TextField.clear.config.ts +++ b/packages/sdds-crm/src/components/TextField/TextField.clear.config.ts @@ -1,3 +1,52 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,132 +58,132 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-positive); + ${tokens.color}: ${textPositive}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-positive); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textPositive}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-positive); - ${tokens.contentSlotColorHover}: var(--text-positive-hover); - ${tokens.contentSlotColorActive}: var(--text-positive-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPositive}; + ${tokens.contentSlotColorHover}: ${textPositiveHover}; + ${tokens.contentSlotColorActive}: ${textPositiveActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-warning); + ${tokens.color}: ${textWarning}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-warning); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textWarning}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-warning); - ${tokens.contentSlotColorHover}: var(--text-warning-hover); - ${tokens.contentSlotColorActive}: var(--text-warning-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textWarning}; + ${tokens.contentSlotColorHover}: ${textWarningHover}; + ${tokens.contentSlotColorActive}: ${textWarningActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-negative); + ${tokens.color}: ${textNegative}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-negative); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textNegative}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -151,40 +200,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -200,19 +249,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -235,40 +284,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -283,12 +332,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -311,40 +360,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -359,12 +408,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -387,40 +436,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -435,12 +484,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -463,40 +512,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -511,12 +560,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -529,126 +578,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -661,12 +710,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -685,12 +734,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -709,13 +758,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); + ${tokens.colorReadOnly}: ${textPrimary}; ${tokens.backgroundColorReadOnly}: transparent; - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-crm/src/components/TextField/TextField.config.ts b/packages/sdds-crm/src/components/TextField/TextField.config.ts index c029fa0c4a6..9eebaa2c9b3 100644 --- a/packages/sdds-crm/src/components/TextField/TextField.config.ts +++ b/packages/sdds-crm/src/components/TextField/TextField.config.ts @@ -1,3 +1,56 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,120 +62,120 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-positive); - ${tokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPositive}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-warning); - ${tokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentWarning}; + ${tokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -135,40 +188,40 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -184,19 +237,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -219,20 +272,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -240,20 +293,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -266,12 +319,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -297,20 +350,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -318,20 +371,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -344,12 +397,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -375,20 +428,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -396,20 +449,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -422,12 +475,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -453,20 +506,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -474,20 +527,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -500,12 +553,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -520,126 +573,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -652,12 +705,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -676,12 +729,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -700,13 +753,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-crm/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/sdds-crm/src/components/TextFieldGroup/TextFieldGroup.config.ts index 200d2e26ac4..0558934bbac 100644 --- a/packages/sdds-crm/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/sdds-crm/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.textFieldDefaultRadius}: 0.75rem; @@ -77,28 +78,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -111,12 +112,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -133,28 +134,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -167,12 +168,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.textFieldSegmentedRadius}: 0.125rem; @@ -189,28 +190,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -223,12 +224,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-crm/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-crm/src/components/TimePicker/TimePicker.config.ts index b86cc9da0bd..2983d6d8b2e 100644 --- a/packages/sdds-crm/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-crm/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,45 +33,45 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; - ${tokens.labelColor}: var(--text-primary); + ${tokens.labelColor}: ${textPrimary}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); + ${tokens.timePickerShadow}: ${shadowDownSoftS}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -63,12 +86,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -80,12 +103,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -103,34 +126,34 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.5rem; @@ -146,12 +169,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -163,12 +186,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -186,34 +209,34 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -229,12 +252,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -246,12 +269,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -269,34 +292,34 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.813rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -312,12 +335,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -329,12 +352,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -352,34 +375,34 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -450,13 +473,13 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-crm/src/components/Toast/Toast.config.ts b/packages/sdds-crm/src/components/Toast/Toast.config.ts index 9678f1dd594..fcaef0186f2 100644 --- a/packages/sdds-crm/src/components/Toast/Toast.config.ts +++ b/packages/sdds-crm/src/components/Toast/Toast.config.ts @@ -1,3 +1,17 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,49 +23,49 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-positive); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textPositive}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-negative); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textNegative}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary); + ${toastTokens.closeIconColor}: ${onDarkTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary); + ${toastTokens.closeIconColor}: ${onLightTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextSecondary}; `, }, size: { @@ -59,12 +73,12 @@ export const config = { ${toastTokens.borderRadius}: 0.75rem; ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/sdds-crm/src/components/Toolbar/Toolbar.config.ts b/packages/sdds-crm/src/components/Toolbar/Toolbar.config.ts index 89581b0d6bf..9cb480ea452 100644 --- a/packages/sdds-crm/src/components/Toolbar/Toolbar.config.ts +++ b/packages/sdds-crm/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/sdds-crm/src/components/Tooltip/Tooltip.config.ts b/packages/sdds-crm/src/components/Tooltip/Tooltip.config.ts index 2ca59cef4c5..063bded1eea 100644 --- a/packages/sdds-crm/src/components/Tooltip/Tooltip.config.ts +++ b/packages/sdds-crm/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,4 @@ +import { bodyS, bodyXS, surfaceSolidCardBrightness, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +17,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -30,7 +31,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -41,12 +42,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -55,15 +56,15 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.color}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-crm/src/components/Tree/Tree.config.ts b/packages/sdds-crm/src/components/Tree/Tree.config.ts index e8cbfce73a6..7d656d6849d 100644 --- a/packages/sdds-crm/src/components/Tree/Tree.config.ts +++ b/packages/sdds-crm/src/components/Tree/Tree.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,24 +24,24 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -53,12 +69,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.itemHeight}: 3.5rem; @@ -84,12 +100,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.itemHeight}: 3rem; @@ -115,12 +131,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -146,12 +162,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.itemHeight}: 2rem; @@ -177,12 +193,12 @@ export const config = { ${tokens.checkboxInnerSize}: 0.875rem; ${tokens.checkboxBorderRadius}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-crm/src/components/Typography/Body.config.ts b/packages/sdds-crm/src/components/Typography/Body.config.ts index 23927fdf18c..77b809cadb0 100644 --- a/packages/sdds-crm/src/components/Typography/Body.config.ts +++ b/packages/sdds-crm/src/components/Typography/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-crm/src/components/Typography/Dspl.config.ts b/packages/sdds-crm/src/components/Typography/Dspl.config.ts index 3fb1245a027..33a981daf4d 100644 --- a/packages/sdds-crm/src/components/Typography/Dspl.config.ts +++ b/packages/sdds-crm/src/components/Typography/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +18,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +38,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +58,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/sdds-crm/src/components/Typography/Heading.config.ts b/packages/sdds-crm/src/components/Typography/Heading.config.ts index 77f16729129..a6f97d52bdd 100644 --- a/packages/sdds-crm/src/components/Typography/Heading.config.ts +++ b/packages/sdds-crm/src/components/Typography/Heading.config.ts @@ -1,3 +1,23 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, + h6, + h6Bold, + h6Medium, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configH1 = { @@ -7,14 +27,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +46,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +65,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +84,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +103,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, @@ -102,14 +122,14 @@ export const configH6 = { variations: { size: { h6: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + ${typographyTokens.typoFontFamily}: ${h6.fontFamily}; + ${typographyTokens.typoFontSize}: ${h6.fontSize}; + ${typographyTokens.typoFontStyle}: ${h6.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h6.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h6Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h6Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h6.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h6.lineHeight}; `, }, }, diff --git a/packages/sdds-crm/src/components/Typography/Text.config.ts b/packages/sdds-crm/src/components/Typography/Text.config.ts index 542bc09a87d..6331238bfeb 100644 --- a/packages/sdds-crm/src/components/Typography/Text.config.ts +++ b/packages/sdds-crm/src/components/Typography/Text.config.ts @@ -1,3 +1,17 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +21,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +41,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +61,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +81,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, From 209cfd387eaa7a01e5e2128bd442b0b34863644f Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 19:31:11 +0300 Subject: [PATCH 12/24] chore(sdds-cs): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 60 ++-- .../src/components/Attach/Attach.config.ts | 266 ++++++++++-------- .../src/components/Badge/Badge.config.ts | 58 ++-- .../Breadcrumbs/Breadcrumbs.config.ts | 28 +- .../src/components/Button/Button.config.ts | 93 +++--- .../ButtonGroup/ButtonGroup.config.ts | 94 ++++--- .../src/components/Card/Card.config.ts | 3 +- .../components/Carousel/Carousel.config.ts | 26 +- .../src/components/Cell/Cell.config.ts | 81 +++--- .../components/Checkbox/Checkbox.config.ts | 53 ++-- .../components/ChipGroup/ChipGroup.config.ts | 57 ++-- .../src/components/Counter/Counter.config.ts | 37 ++- .../src/components/Divider/Divider.config.ts | 14 +- .../EmptyState/EmptyState.config.ts | 49 ++-- .../IconButton/IconButton.config.ts | 65 +++-- .../Notification/Notification.config.ts | 54 ++-- .../NumberInput/NumberInput.config.ts | 77 ++--- .../Pagination/Pagination.config.ts | 76 ++--- .../src/components/Popover/Popover.config.ts | 6 +- .../components/Progress/Progress.config.ts | 33 ++- .../components/Radiobox/Radiobox.config.ts | 46 +-- .../src/components/Range/Range.config.ts | 160 ++++++----- .../src/components/Rating/Rating.config.ts | 75 ++--- .../components/Segment/SegmentGroup.config.ts | 12 +- .../components/Segment/SegmentItem.config.ts | 67 +++-- .../src/components/Slider/Slider.config.ts | 124 ++++---- .../src/components/Steps/Steps.config.ts | 98 ++++--- .../src/components/Switch/Switch.config.ts | 66 +++-- .../Tabs/horizontal/HorizontalTabs.config.ts | 4 +- .../Tabs/vertical/VerticalTabItem.config.ts | 76 ++--- .../Tabs/vertical/VerticalTabs.config.ts | 35 ++- .../TextField/TextField.clear.config.ts | 241 +++++++++------- .../src/components/Toast/Toast.config.ts | 52 ++-- .../components/ToastNew/ToastNew.config.ts | 28 +- .../src/components/Tooltip/Tooltip.config.ts | 31 +- .../src/components/Tree/Tree.config.ts | 56 ++-- .../src/components/Typography/Body.config.ts | 98 ++++--- .../src/components/Typography/Dspl.config.ts | 60 ++-- .../components/Typography/Heading.config.ts | 98 ++++--- .../src/components/Typography/Text.config.ts | 78 ++--- 40 files changed, 1575 insertions(+), 1160 deletions(-) diff --git a/packages/sdds-cs/src/components/Accordion/Accordion.config.ts b/packages/sdds-cs/src/components/Accordion/Accordion.config.ts index 6705df8de74..2d6e1073de3 100644 --- a/packages/sdds-cs/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-cs/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,13 @@ +import { + bodyM, + bodyMBold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + textAccent, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { @@ -11,12 +21,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-accent); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textAccent}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, @@ -24,14 +34,14 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-accent); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textAccent}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorderBottom}: 0.125rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorderBottom}: 0.125rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -43,19 +53,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/sdds-cs/src/components/Attach/Attach.config.ts b/packages/sdds-cs/src/components/Attach/Attach.config.ts index 27a946b3c28..4e5a6a18268 100644 --- a/packages/sdds-cs/src/components/Attach/Attach.config.ts +++ b/packages/sdds-cs/src/components/Attach/Attach.config.ts @@ -1,3 +1,29 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + onLightTextAccentMinor, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceSolidPrimary, + surfaceSolidPrimaryActive, + surfaceSolidPrimaryHover, + surfaceTransparentAccent, + textAccent, + textAccentActive, + textAccentMinor, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, attachTokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { @@ -10,135 +36,135 @@ export const config = { variations: { view: { accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-accent-minor); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextAccentMinor}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-accent); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-primary); + ${attachTokens.buttonColor}: ${textAccent}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidPrimary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-accent-minor); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-primary-hover); - ${attachTokens.buttonColorActive}: var(--text-accent-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-primary-active); + ${attachTokens.buttonColorHover}: ${textAccentMinor}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidPrimaryHover}; + ${attachTokens.buttonColorActive}: ${textAccentActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidPrimaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-accent); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-primary); + ${attachTokens.iconButtonColor}: ${textAccent}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidPrimary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-accent-minor); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-primary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-accent-minor); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-primary-active); + ${attachTokens.iconButtonColorHover}: ${textAccentMinor}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidPrimaryHover}; + ${attachTokens.iconButtonColorActive}: ${textAccentMinor}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidPrimaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-accent); - ${attachTokens.buttonValueColor}: var(--text-accent-minor); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); - ${attachTokens.buttonLoadingBackgroundColor}: var(--surface-transparent-accent); - ${attachTokens.buttonColorHover}: var(--text-accent-minor); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-accent); - ${attachTokens.buttonColorActive}: var(--text-accent-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textAccent}; + ${attachTokens.buttonValueColor}: ${textAccentMinor}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; + ${attachTokens.buttonLoadingBackgroundColor}: ${surfaceTransparentAccent}; + ${attachTokens.buttonColorHover}: ${textAccentMinor}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentAccent}; + ${attachTokens.buttonColorActive}: ${textAccentActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-accent); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${attachTokens.iconButtonLoadingBackgroundColor}: var(--surface-transparent-accent); - ${attachTokens.iconButtonColorHover}: var(--text-accent-minor); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-accent); - ${attachTokens.iconButtonColorActive}: var(--text-accent-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textAccent}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${attachTokens.iconButtonLoadingBackgroundColor}: ${surfaceTransparentAccent}; + ${attachTokens.iconButtonColorHover}: ${textAccentMinor}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentAccent}; + ${attachTokens.iconButtonColorActive}: ${textAccentActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -152,12 +178,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -176,37 +202,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -215,12 +241,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/sdds-cs/src/components/Badge/Badge.config.ts b/packages/sdds-cs/src/components/Badge/Badge.config.ts index bcd9ec1148c..62da9864bc6 100644 --- a/packages/sdds-cs/src/components/Badge/Badge.config.ts +++ b/packages/sdds-cs/src/components/Badge/Badge.config.ts @@ -1,3 +1,17 @@ +import { + bodyS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + textAccent, + textNegative, + textPositive, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { @@ -8,31 +22,31 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.colorClear}: ${textPositive}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.colorClear}: ${textNegative}; `, }, size: { @@ -42,12 +56,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -66,7 +80,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/sdds-cs/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/sdds-cs/src/components/Breadcrumbs/Breadcrumbs.config.ts index c6d96e02c0e..f633b61ec6e 100644 --- a/packages/sdds-cs/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/sdds-cs/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,11 @@ +import { + bodyS, + bodySBold, + surfaceAccent, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { @@ -8,23 +16,23 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-accent); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-secondary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textAccent}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textSecondary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 1; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, }, }, diff --git a/packages/sdds-cs/src/components/Button/Button.config.ts b/packages/sdds-cs/src/components/Button/Button.config.ts index a9c1d46095c..ddf8c5994de 100644 --- a/packages/sdds-cs/src/components/Button/Button.config.ts +++ b/packages/sdds-cs/src/components/Button/Button.config.ts @@ -1,3 +1,22 @@ +import { + bodyM, + bodyMBold, + onDarkTextPrimary, + onLightTextAccentMinor, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceSolidSecondary, + surfaceSolidSecondaryActive, + surfaceSolidSecondaryHover, + surfaceTransparentAccent, + surfaceTransparentAccentActive, + textAccent, + textAccentActive, + textAccentMinor, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { @@ -9,36 +28,36 @@ export const config = { variations: { view: { accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-accent-minor); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextAccentMinor}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-accent); - ${buttonTokens.buttonColorHover}: var(--text-accent-minor); - ${buttonTokens.buttonColorActive}: var(--text-accent-active); - ${buttonTokens.buttonTextColor}: var(--text-accent); - ${buttonTokens.buttonIconColor}: var(--text-accent); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-secondary); + ${buttonTokens.buttonColor}: ${textAccent}; + ${buttonTokens.buttonColorHover}: ${textAccentMinor}; + ${buttonTokens.buttonColorActive}: ${textAccentActive}; + ${buttonTokens.buttonTextColor}: ${textAccent}; + ${buttonTokens.buttonIconColor}: ${textAccent}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-solid-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-solid-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceSolidSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceSolidSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-accent); - ${buttonTokens.buttonTextColor}: var(--text-accent); - ${buttonTokens.buttonIconColor}: var(--text-accent); - ${buttonTokens.buttonValueColor}: var(--text-accent-minor); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); - ${buttonTokens.buttonLoadingBackgroundColor}: var(--surface-transparent-accent); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-accent); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-accent-active); + ${buttonTokens.buttonColor}: ${textAccent}; + ${buttonTokens.buttonTextColor}: ${textAccent}; + ${buttonTokens.buttonIconColor}: ${textAccent}; + ${buttonTokens.buttonValueColor}: ${textAccentMinor}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; + ${buttonTokens.buttonLoadingBackgroundColor}: ${surfaceTransparentAccent}; + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentAccent}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentAccentActive}; `, }, size: { @@ -47,12 +66,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -64,12 +83,12 @@ export const config = { sr: css` ${buttonTokens.buttonHeight}: 2.5rem; ${buttonTokens.buttonWidth}: 11.25rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -83,7 +102,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/sdds-cs/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/sdds-cs/src/components/ButtonGroup/ButtonGroup.config.ts index c6fce6d3ddb..4321cfde985 100644 --- a/packages/sdds-cs/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/sdds-cs/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,21 @@ +import { + bodyS, + bodySBold, + onDarkTextPrimary, + onLightTextAccentMinor, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceSolidPrimary, + surfaceSolidPrimaryActive, + surfaceSolidPrimaryHover, + surfaceTransparentAccent, + textAccent, + textAccentActive, + textAccentMinor, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { @@ -8,38 +26,38 @@ export const config = { variations: { view: { accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-accent-minor); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextAccentMinor}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-accent); - ${buttonGroupTokens.buttonTextColor}: var(--text-accent); - ${buttonGroupTokens.buttonIconColor}: var(--text-accent); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-primary); + ${buttonGroupTokens.buttonColor}: ${textAccent}; + ${buttonGroupTokens.buttonTextColor}: ${textAccent}; + ${buttonGroupTokens.buttonIconColor}: ${textAccent}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidPrimary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-accent-minor); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-primary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-accent-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-primary-active); + ${buttonGroupTokens.buttonColorHover}: ${textAccentMinor}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidPrimaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textAccentActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidPrimaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-accent); - ${buttonGroupTokens.buttonTextColor}: var(--text-accent); - ${buttonGroupTokens.buttonValueColor}: var(--text-accent); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); - ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(--surface-transparent-accent); - ${buttonGroupTokens.buttonColorHover}: var(--text-accent-minor); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-accent); - ${buttonGroupTokens.buttonColorActive}: var(--text-accent-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textAccent}; + ${buttonGroupTokens.buttonTextColor}: ${textAccent}; + ${buttonGroupTokens.buttonValueColor}: ${textAccent}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; + ${buttonGroupTokens.buttonLoadingBackgroundColor}: ${surfaceTransparentAccent}; + ${buttonGroupTokens.buttonColorHover}: ${textAccentMinor}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentAccent}; + ${buttonGroupTokens.buttonColorActive}: ${textAccentActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, }, size: { @@ -50,12 +68,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, sr: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -63,12 +81,12 @@ export const config = { ${buttonGroupTokens.buttonSideRadius}: 0.75rem; ${buttonGroupTokens.buttonHeight}: 2.5rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-cs/src/components/Card/Card.config.ts b/packages/sdds-cs/src/components/Card/Card.config.ts index c2e07251bdc..b70d07d8bdb 100644 --- a/packages/sdds-cs/src/components/Card/Card.config.ts +++ b/packages/sdds-cs/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { @@ -8,7 +9,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/sdds-cs/src/components/Carousel/Carousel.config.ts b/packages/sdds-cs/src/components/Carousel/Carousel.config.ts index 609d2261573..f8348b12282 100644 --- a/packages/sdds-cs/src/components/Carousel/Carousel.config.ts +++ b/packages/sdds-cs/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,13 @@ +import { + surfaceAccent, + surfaceSolidPrimary, + surfaceSolidPrimaryActive, + surfaceSolidPrimaryHover, + textAccent, + textAccentActive, + textAccentMinor, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { @@ -8,14 +18,14 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-accent); - ${tokens.paginationDotActiveBackground}: var(--text-primary); - ${tokens.controlIconButtonColor}: var(--text-accent); - ${tokens.controlIconButtonBackgroundColor}: var(--surface-solid-primary); - ${tokens.controlIconButtonColorHover}: var(--text-accent-minor); - ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-solid-primary-hover); - ${tokens.controlIconButtonColorActive}: var(--text-accent-active); - ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-solid-primary-active); + ${tokens.paginationDotBackground}: ${surfaceAccent}; + ${tokens.paginationDotActiveBackground}: ${textPrimary}; + ${tokens.controlIconButtonColor}: ${textAccent}; + ${tokens.controlIconButtonBackgroundColor}: ${surfaceSolidPrimary}; + ${tokens.controlIconButtonColorHover}: ${textAccentMinor}; + ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceSolidPrimaryHover}; + ${tokens.controlIconButtonColorActive}: ${textAccentActive}; + ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceSolidPrimaryActive}; `, }, size: { diff --git a/packages/sdds-cs/src/components/Cell/Cell.config.ts b/packages/sdds-cs/src/components/Cell/Cell.config.ts index 7461e31d706..a3619b1e4e3 100644 --- a/packages/sdds-cs/src/components/Cell/Cell.config.ts +++ b/packages/sdds-cs/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, cellTokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.25rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-cs/src/components/Checkbox/Checkbox.config.ts b/packages/sdds-cs/src/components/Checkbox/Checkbox.config.ts index 593a3dad96c..c25826f08fd 100644 --- a/packages/sdds-cs/src/components/Checkbox/Checkbox.config.ts +++ b/packages/sdds-cs/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,14 @@ +import { + bodyM, + bodyS, + onDarkTextPrimary, + outlineAccent, + outlineSolidPrimary, + surfaceSolidTertiary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { @@ -17,41 +28,41 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); - ${checkboxTokens.triggerBorderColor}: var(--outline-accent); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; + ${checkboxTokens.triggerBorderColor}: ${outlineAccent}; ${checkboxTokens.triggerBackgroundColor}: transparent; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, disabled: { true: css` - ${checkboxTokens.triggerBorderColor}: var(--outline-solid-primary); - ${checkboxTokens.fillColor}: var(--surface-solid-tertiary); - ${checkboxTokens.labelColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${outlineSolidPrimary}; + ${checkboxTokens.fillColor}: ${surfaceSolidTertiary}; + ${checkboxTokens.labelColor}: ${textSecondary}; `, }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-cs/src/components/ChipGroup/ChipGroup.config.ts b/packages/sdds-cs/src/components/ChipGroup/ChipGroup.config.ts index 151c7327eeb..9fceeb23264 100644 --- a/packages/sdds-cs/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/sdds-cs/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,12 @@ +import { + bodyM, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceSolidDefault, + surfaceSolidPrimary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { @@ -8,28 +17,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefault}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefault}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-solid-primary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-primary); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-primary); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceSolidPrimary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidPrimary}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidPrimary}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccent}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccent}; `, }, size: { @@ -39,12 +48,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.25rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/sdds-cs/src/components/Counter/Counter.config.ts b/packages/sdds-cs/src/components/Counter/Counter.config.ts index 75156f9a169..005aa4b45a5 100644 --- a/packages/sdds-cs/src/components/Counter/Counter.config.ts +++ b/packages/sdds-cs/src/components/Counter/Counter.config.ts @@ -1,3 +1,12 @@ +import { + bodyS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, counterTokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { @@ -8,20 +17,20 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, }, size: { @@ -30,12 +39,12 @@ export const config = { ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, }, }, diff --git a/packages/sdds-cs/src/components/Divider/Divider.config.ts b/packages/sdds-cs/src/components/Divider/Divider.config.ts index da82db911b5..197200b8335 100644 --- a/packages/sdds-cs/src/components/Divider/Divider.config.ts +++ b/packages/sdds-cs/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseSurfaceSolidDefault, + onDarkSurfaceSolidDefault, + onLightSurfaceSolidDefault, + surfaceSolidTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-solid-tertiary); + ${dividerTokens.background}: ${surfaceSolidTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-solid-default); + ${dividerTokens.background}: ${onDarkSurfaceSolidDefault}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-solid-default); + ${dividerTokens.background}: ${onLightSurfaceSolidDefault}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-surface-solid-default); + ${dividerTokens.background}: ${inverseSurfaceSolidDefault}; `, }, size: { diff --git a/packages/sdds-cs/src/components/EmptyState/EmptyState.config.ts b/packages/sdds-cs/src/components/EmptyState/EmptyState.config.ts index c4f2bb44596..4deffc02570 100644 --- a/packages/sdds-cs/src/components/EmptyState/EmptyState.config.ts +++ b/packages/sdds-cs/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-cs/src/components/IconButton/IconButton.config.ts b/packages/sdds-cs/src/components/IconButton/IconButton.config.ts index 198783d36a8..126843c101b 100644 --- a/packages/sdds-cs/src/components/IconButton/IconButton.config.ts +++ b/packages/sdds-cs/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,20 @@ +import { + bodyS, + bodySBold, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceSolidSecondary, + surfaceSolidSecondaryActive, + surfaceSolidSecondaryHover, + surfaceTransparentAccent, + surfaceTransparentAccentActive, + textAccent, + textAccentActive, + textAccentMinor, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { @@ -9,29 +26,29 @@ export const config = { variations: { view: { accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-accent); - ${iconButtonTokens.iconButtonColorHover}: var(--text-accent-minor); - - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-secondary); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-solid-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-solid-secondary-active); + ${iconButtonTokens.iconButtonColor}: ${textAccent}; + ${iconButtonTokens.iconButtonColorHover}: ${textAccentMinor}; + + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidSecondary}; + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceSolidSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceSolidSecondaryActive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - - ${iconButtonTokens.iconButtonColorActive}: var(--text-accent-active); + + ${iconButtonTokens.iconButtonColorActive}: ${textAccentActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-accent); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(--surface-transparent-accent); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-accent); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-accent-active); + ${iconButtonTokens.iconButtonColor}: ${textAccent}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${iconButtonTokens.iconButtonLoadingBackgroundColor}: ${surfaceTransparentAccent}; + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentAccent}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentAccentActive}; `, }, size: { @@ -40,12 +57,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -58,7 +75,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-cs/src/components/Notification/Notification.config.ts b/packages/sdds-cs/src/components/Notification/Notification.config.ts index f9a1fabe105..dcac7735758 100644 --- a/packages/sdds-cs/src/components/Notification/Notification.config.ts +++ b/packages/sdds-cs/src/components/Notification/Notification.config.ts @@ -1,5 +1,15 @@ +import { + bodyM, + bodyMBold, + bodyS, + outlineSolidPrimary, + surfaceSolidCard, + textAccent, + textAccentMinor, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'default', @@ -8,13 +18,13 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-solid-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceSolidCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.75rem; - ${notificationTokens.borderColor}: var(--outline-solid-primary); + ${notificationTokens.borderColor}: ${outlineSolidPrimary}; ${notificationTokens.contentPaddingTop}: 0.125rem; ${notificationTokens.contentPaddingRight}: 0.25rem; @@ -41,22 +51,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.25rem; ${notificationTokens.contentTopIconMargin}: 0.25rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-m-line-height); - - ${notificationTokens.closeIconColor}: var(--text-accent); - ${notificationTokens.closeIconColorOnHover}:var(--text-accent-minor); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyM.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyM.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyM.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodyMBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyM.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyM.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textAccent}; + ${notificationTokens.closeIconColorOnHover}:${textAccentMinor}; ${notificationTokens.horizontalLayoutGap}: 0.5rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/sdds-cs/src/components/NumberInput/NumberInput.config.ts b/packages/sdds-cs/src/components/NumberInput/NumberInput.config.ts index f2eea73e45b..bc5d8d7036f 100644 --- a/packages/sdds-cs/src/components/NumberInput/NumberInput.config.ts +++ b/packages/sdds-cs/src/components/NumberInput/NumberInput.config.ts @@ -1,5 +1,17 @@ +import { + bodyS, + bodySBold, + outlineAccent, + outlineSolidPrimary, + surfaceSolidCard, + textAccent, + textAccentActive, + textAccentMinor, + textNegative, + textPrimary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'default', @@ -11,19 +23,19 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorSolid}: var(--surface-solid-card); - ${tokens.wrapperBorderColor}: var(--outline-solid-primary); - ${tokens.wrapperBorderColorFocus}: var(--outline-accent); + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorSolid}: ${surfaceSolidCard}; + ${tokens.wrapperBorderColor}: ${outlineSolidPrimary}; + ${tokens.wrapperBorderColorFocus}: ${outlineAccent}; - ${tokens.iconButtonColor}: var(--text-accent); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-card); - ${tokens.iconButtonColorSolidHover}: var(--text-accent-minor); - ${tokens.iconButtonColorSolidActive}: var(--text-accent-active); + ${tokens.iconButtonColor}: ${textAccent}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidCard}; + ${tokens.iconButtonColorSolidHover}: ${textAccentMinor}; + ${tokens.iconButtonColorSolidActive}: ${textAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -33,17 +45,16 @@ export const config = { }, size: { s: css` - ${tokens.rootMinWidth}: 7.5rem; - ${tokens.iconButtonHeight}: 2.5rem; - ${tokens.iconButtonWidth}: 2.5rem; - ${tokens.iconButtonPadding}: 0.5rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); - + ${tokens.rootMinWidth}: 8.75rem; + ${tokens.iconButtonHeight}: 2.625rem; + ${tokens.iconButtonWidth}: 2.625rem; + ${tokens.iconButtonPadding}: 1rem; + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -53,20 +64,12 @@ export const config = { ${tokens.textWrapperPadding}: 0.5rem 0.375rem; ${tokens.rootBorderWidth}: 0.125rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.additionalTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.additionalTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.additionalTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.additionalTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.additionalTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.additionalTextLineHeight}: var(--plasma-typo-body-s-line-height); - + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; diff --git a/packages/sdds-cs/src/components/Pagination/Pagination.config.ts b/packages/sdds-cs/src/components/Pagination/Pagination.config.ts index faa672855fa..09a1c4dbe37 100644 --- a/packages/sdds-cs/src/components/Pagination/Pagination.config.ts +++ b/packages/sdds-cs/src/components/Pagination/Pagination.config.ts @@ -1,5 +1,17 @@ +import { + bodyM, + outlineSolidPrimary, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidPrimary, + textAccent, + textAccentActive, + textAccentMinor, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, paginationTokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'default', @@ -9,47 +21,47 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--text-accent); - ${paginationTokens.buttonColorHover}: var(--text-accent-minor); - ${paginationTokens.buttonColorActive}: var(--text-accent-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-accent-minor); - ${paginationTokens.buttonActiveColor}: var(--text-accent-active); - ${paginationTokens.buttonArrowColor}: var(--text-accent); - ${paginationTokens.buttonArrowColorHover}: var(--text-accent-minor); - ${paginationTokens.buttonArrowColorActive}: var(--text-accent-active); + ${paginationTokens.buttonColor}: ${textAccent}; + ${paginationTokens.buttonColorHover}: ${textAccentMinor}; + ${paginationTokens.buttonColorActive}: ${textAccentActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textAccentMinor}; + ${paginationTokens.buttonActiveColor}: ${textAccentActive}; + ${paginationTokens.buttonArrowColor}: ${textAccent}; + ${paginationTokens.buttonArrowColorHover}: ${textAccentMinor}; + ${paginationTokens.buttonArrowColorActive}: ${textAccentActive}; - ${paginationTokens.inputBackgroundColor}: var(--surface-solid-card); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); - ${paginationTokens.inputBorderColor}: var(--outline-solid-primary); + ${paginationTokens.inputBackgroundColor}: ${surfaceSolidCard}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; + ${paginationTokens.inputBorderColor}: ${outlineSolidPrimary}; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); - ${paginationTokens.paginationDisabledButtonColor}: var(--text-secondary); - ${paginationTokens.paginationDisabledButtonBackgroundColor}: var(--surface-clear); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; + ${paginationTokens.paginationDisabledButtonColor}: ${textSecondary}; + ${paginationTokens.paginationDisabledButtonBackgroundColor}: ${surfaceClear}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-primary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: var(--surface-solid-primary); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: var(--surface-solid-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidPrimary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: ${surfaceSolidPrimary}; + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: ${surfaceSolidPrimary}; `, }, size: { s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyM.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; diff --git a/packages/sdds-cs/src/components/Popover/Popover.config.ts b/packages/sdds-cs/src/components/Popover/Popover.config.ts index 38e42700795..8b8774fce2d 100644 --- a/packages/sdds-cs/src/components/Popover/Popover.config.ts +++ b/packages/sdds-cs/src/components/Popover/Popover.config.ts @@ -1,5 +1,5 @@ +import { shadowDownHardM, surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'default', @@ -7,14 +7,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-card); + ${popoverTokens.arrowBackground}: ${surfaceSolidCard}; `, }, }, diff --git a/packages/sdds-cs/src/components/Progress/Progress.config.ts b/packages/sdds-cs/src/components/Progress/Progress.config.ts index dd69540fe2e..13905f581c9 100644 --- a/packages/sdds-cs/src/components/Progress/Progress.config.ts +++ b/packages/sdds-cs/src/components/Progress/Progress.config.ts @@ -1,5 +1,12 @@ +import { + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidPrimary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, progressTokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'default', @@ -8,25 +15,25 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-solid-primary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceSolidPrimary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-solid-primary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceSolidPrimary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent}; + ${progressTokens.valueColor}: ${textTertiary}; `, positive: css` - ${progressTokens.trackBackgroundColor}: var(--surface-solid-primary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceSolidPrimary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, negative: css` - ${progressTokens.trackBackgroundColor}: var(--surface-solid-primary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceSolidPrimary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/sdds-cs/src/components/Radiobox/Radiobox.config.ts b/packages/sdds-cs/src/components/Radiobox/Radiobox.config.ts index a7a75e08585..388ecb70969 100644 --- a/packages/sdds-cs/src/components/Radiobox/Radiobox.config.ts +++ b/packages/sdds-cs/src/components/Radiobox/Radiobox.config.ts @@ -1,5 +1,13 @@ +import { + bodyM, + bodyS, + onDarkTextPrimary, + outlineAccent, + surfaceSolidCard, + textAccent, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'accent', @@ -21,18 +29,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, /** @@ -40,11 +48,11 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); - ${radioboxTokens.triggerBackgroundColor}: var(--surface-solid-card); - ${radioboxTokens.triggerBorderColor}: var(--outline-accent); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; + ${radioboxTokens.triggerBackgroundColor}: ${surfaceSolidCard}; + ${radioboxTokens.triggerBorderColor}: ${outlineAccent}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -55,7 +63,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-cs/src/components/Range/Range.config.ts b/packages/sdds-cs/src/components/Range/Range.config.ts index f23c411f027..71f4c3442b3 100644 --- a/packages/sdds-cs/src/components/Range/Range.config.ts +++ b/packages/sdds-cs/src/components/Range/Range.config.ts @@ -1,5 +1,25 @@ +import { + bodyM, + bodyS, + bodySBold, + outlineAccent, + outlineNegative, + outlineSolidPrimary, + outlineSolidPrimaryHover, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceSolidPrimary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'default', @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-solid-card); - ${tokens.borderColor}: var(--outline-solid-primary); - ${tokens.borderColorError}: var(--outline-negative); - ${tokens.borderColorSuccess}: var(--outline-accent); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldBorderColorError}: var(--outline-negative); - ${tokens.textFieldBorderColorErrorFocus}: var(--outline-negative); - ${tokens.textFieldBorderColorSuccess}: var(--outline-accent); - ${tokens.textFieldBorderColorSuccessFocus}: var(--outline-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldTextAfterColor}: var(--text-secondary); - ${tokens.textFieldTextBeforeColor}: var(--text-secondary); + ${tokens.background}: ${surfaceSolidCard}; + ${tokens.borderColor}: ${outlineSolidPrimary}; + ${tokens.borderColorError}: ${outlineNegative}; + ${tokens.borderColorSuccess}: ${outlineAccent}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldBorderColorError}: ${outlineNegative}; + ${tokens.textFieldBorderColorErrorFocus}: ${outlineNegative}; + ${tokens.textFieldBorderColorSuccess}: ${outlineAccent}; + ${tokens.textFieldBorderColorSuccessFocus}: ${outlineAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldTextAfterColor}: ${textSecondary}; + ${tokens.textFieldTextBeforeColor}: ${textSecondary}; `, }, size: { @@ -49,12 +69,12 @@ export const config = { ${tokens.borderWidth}: 0.125rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodySBold.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.375rem 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -63,24 +83,24 @@ export const config = { ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldPadding}: 0.6875rem 0.75rem 0.6875rem 0.75rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -102,38 +122,38 @@ export const config = { ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.leftHelperFontFamily}: ${bodyS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 1; - ${tokens.background}: var(--surface-solid-primary); - ${tokens.borderColor}: var(--surface-solid-primary); - ${tokens.textFieldBorderColorFocus}: var(--surface-solid-primary); - ${tokens.textFieldColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.background}: ${surfaceSolidPrimary}; + ${tokens.borderColor}: ${surfaceSolidPrimary}; + ${tokens.textFieldBorderColorFocus}: ${surfaceSolidPrimary}; + ${tokens.textFieldColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; `, }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-solid-card); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.borderColorReadOnly}: var(--outline-solid-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceSolidCard}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.borderColorReadOnly}: ${outlineSolidPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 1; ${tokens.dividerOpacityReadOnly}: 1; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-cs/src/components/Rating/Rating.config.ts b/packages/sdds-cs/src/components/Rating/Rating.config.ts index c7287337935..c9589c3588e 100644 --- a/packages/sdds-cs/src/components/Rating/Rating.config.ts +++ b/packages/sdds-cs/src/components/Rating/Rating.config.ts @@ -1,5 +1,14 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'default', @@ -8,36 +17,36 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; // TODO: change with token data-yellow, when it will be added to theme - ${tokens.iconColor}: var(--text-warning); - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.iconColor}: ${textWarning}; + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -48,19 +57,19 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; diff --git a/packages/sdds-cs/src/components/Segment/SegmentGroup.config.ts b/packages/sdds-cs/src/components/Segment/SegmentGroup.config.ts index 16b6e227248..b39c659c78f 100644 --- a/packages/sdds-cs/src/components/Segment/SegmentGroup.config.ts +++ b/packages/sdds-cs/src/components/Segment/SegmentGroup.config.ts @@ -1,5 +1,5 @@ +import { surfaceSolidPrimary, textAccent } from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'clear', @@ -8,14 +8,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-accent); + ${segmentTokens.arrowColor}: ${textAccent}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-accent); + ${segmentTokens.arrowColor}: ${textAccent}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, }, size: { @@ -39,7 +39,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-solid-primary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceSolidPrimary}; `, }, orientation: { diff --git a/packages/sdds-cs/src/components/Segment/SegmentItem.config.ts b/packages/sdds-cs/src/components/Segment/SegmentItem.config.ts index 61f7cc5e515..65caf589aa1 100644 --- a/packages/sdds-cs/src/components/Segment/SegmentItem.config.ts +++ b/packages/sdds-cs/src/components/Segment/SegmentItem.config.ts @@ -1,5 +1,14 @@ +import { + bodyS, + bodySBold, + surfaceAccent, + surfaceSolidCard, + textAccent, + textAccentMinor, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'default', @@ -8,36 +17,36 @@ export const config = { variations: { view: { default: css` - ${segmentTokens.itemColor}: var(--text-accent); + ${segmentTokens.itemColor}: ${textAccent}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-accent-minor); + ${segmentTokens.itemColorHover}: ${textAccentMinor}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-accent-minor); - ${segmentTokens.itemAdditionalColorHover}: var(--text-accent-minor); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textAccentMinor}; + ${segmentTokens.itemAdditionalColorHover}: ${textAccentMinor}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.outlineFocusColor}: var(--surface-accent); + ${segmentTokens.outlineFocusColor}: ${surfaceAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-accent); + ${segmentTokens.itemColor}: ${textAccent}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-accent-minor); + ${segmentTokens.itemColorHover}: ${textAccentMinor}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-accent-minor); - ${segmentTokens.itemAdditionalColorHover}: var(--text-accent-minor); - ${segmentTokens.itemSelectedColor}: var(--text-accent); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-accent-minor); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-accent-minor); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-accent-minor); + ${segmentTokens.itemAdditionalColor}: ${textAccentMinor}; + ${segmentTokens.itemAdditionalColorHover}: ${textAccentMinor}; + ${segmentTokens.itemSelectedColor}: ${textAccent}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${segmentTokens.itemSelectedColorHover}: ${textAccentMinor}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textAccentMinor}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textAccentMinor}; - ${segmentTokens.outlineFocusColor}: var(--surface-accent); + ${segmentTokens.outlineFocusColor}: ${surfaceAccent}; `, }, size: { @@ -51,12 +60,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-cs/src/components/Slider/Slider.config.ts b/packages/sdds-cs/src/components/Slider/Slider.config.ts index 8d8a3ccfed4..f39db92101d 100644 --- a/packages/sdds-cs/src/components/Slider/Slider.config.ts +++ b/packages/sdds-cs/src/components/Slider/Slider.config.ts @@ -1,5 +1,21 @@ +import { + bodyS, + bodyXS, + onLightSurfaceSolidCard, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + surfaceAccent, + surfaceSolidCard, + surfaceSolidCardActive, + surfaceSolidDefault, + surfaceSolidPrimary, + surfaceSolidTertiary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'default', @@ -8,58 +24,58 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-primary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidPrimary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBorderColor}: var(--outline-solid-primary); - ${sliderTokens.textFieldBorderColorFocus}: var(--outline-accent); - ${sliderTokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); + ${sliderTokens.textFieldBorderColor}: ${outlineSolidPrimary}; + ${sliderTokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${sliderTokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-solid-card); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-solid-card); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-solid-card-active); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceSolidCard}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceSolidCard}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceSolidCardActive}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-primary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidPrimary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldColor}: var(--text-secondary); + ${sliderTokens.textFieldColor}: ${textSecondary}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBorderColor}: var(--outline-solid-primary); - ${sliderTokens.textFieldBorderColorFocus}: var(--outline-accent); - ${sliderTokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); + ${sliderTokens.textFieldBorderColor}: ${outlineSolidPrimary}; + ${sliderTokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${sliderTokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-solid-card); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-solid-card); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-solid-card-active); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceSolidCard}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceSolidCard}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceSolidCardActive}; `, }, size: { @@ -73,24 +89,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -108,12 +124,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-cs/src/components/Steps/Steps.config.ts b/packages/sdds-cs/src/components/Steps/Steps.config.ts index 2a34155c2d4..6d84db98250 100644 --- a/packages/sdds-cs/src/components/Steps/Steps.config.ts +++ b/packages/sdds-cs/src/components/Steps/Steps.config.ts @@ -1,5 +1,19 @@ +import { + bodyM, + bodyS, + inverseTextPrimary, + outlineSolidPrimary, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + textAccent, + textAccentMinor, + textPositive, + textPrimary, + textSecondary, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { size: 's', @@ -8,28 +22,28 @@ export const config = { variations: { view: { default: css` - ${tokens.activeTitleColor}: var(--text-accent); - ${tokens.activeTitleColorHover}: var(--text-accent-minor); - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-positive); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textAccent}; + ${tokens.activeTitleColorHover}: ${textAccentMinor}; + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textPositive}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-primary); - ${tokens.inactiveIndicatorColorHover}: var(--text-primary); - ${tokens.inactiveIndicatorBackground}: var(--outline-solid-primary); + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textPrimary}; + ${tokens.inactiveIndicatorColorHover}: ${textPrimary}; + ${tokens.inactiveIndicatorBackground}: ${outlineSolidPrimary}; ${tokens.inactiveIndicatorBackgroundHover}: #e9eef2; - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; - ${tokens.dividerColor}: var(--text-positive); + ${tokens.dividerColor}: ${textPositive}; ${tokens.disabledOpacity}: 0.4; `, @@ -52,33 +66,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyS.lineHeight}; - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, diff --git a/packages/sdds-cs/src/components/Switch/Switch.config.ts b/packages/sdds-cs/src/components/Switch/Switch.config.ts index a70182266c3..d5887dc82f8 100644 --- a/packages/sdds-cs/src/components/Switch/Switch.config.ts +++ b/packages/sdds-cs/src/components/Switch/Switch.config.ts @@ -1,5 +1,19 @@ +import { + bodyM, + bodyS, + bodyXS, + outlineAccent, + outlineAccentHover, + outlineSolidPrimary, + outlineSolidPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, switchTokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'default', @@ -11,18 +25,18 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -51,21 +65,21 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: 2; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-solid-card); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-solid-card-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceSolidCard}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceSolidCardHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0.125rem; - ${switchTokens.trackBorderColorOn}: var(--outline-accent); - ${switchTokens.trackBorderColorOnHover}: var(--outline-accent-hover); - ${switchTokens.trackBorderColorOff}: var(--outline-solid-primary); - ${switchTokens.trackBorderColorOffHover}: var(--outline-solid-primary-hover); - ${switchTokens.thumbBackgroundColorOn}: var(--surface-solid-card); - ${switchTokens.thumbBackgroundColorOff}: var(--surface-accent); + ${switchTokens.trackBorderColorOn}: ${outlineAccent}; + ${switchTokens.trackBorderColorOnHover}: ${outlineAccentHover}; + ${switchTokens.trackBorderColorOff}: ${outlineSolidPrimary}; + ${switchTokens.trackBorderColorOffHover}: ${outlineSolidPrimaryHover}; + ${switchTokens.thumbBackgroundColorOn}: ${surfaceSolidCard}; + ${switchTokens.thumbBackgroundColorOff}: ${surfaceAccent}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -76,7 +90,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabs.config.ts index dd42be4a841..33fd038f067 100644 --- a/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-cs/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -10,7 +10,7 @@ export const config = { clear: css` ${tabsTokens.arrowColor}: var(--text-secondary); ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColorActive}: var(--text-secondary-active); ${tabsTokens.tabsBackgroundColor}: transparent; ${tabsTokens.outlineFocusColor}: var(--surface-accent); @@ -21,7 +21,7 @@ export const config = { filled: css` ${tabsTokens.arrowColor}: var(--text-secondary); ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColorActive}: var(--text-secondary-active); ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); ${tabsTokens.outlineFocusColor}: var(--surface-accent); diff --git a/packages/sdds-cs/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-cs/src/components/Tabs/vertical/VerticalTabItem.config.ts index 3f384cf8b30..c862a8ddd88 100644 --- a/packages/sdds-cs/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-cs/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,5 +1,15 @@ +import { + bodyM, + bodyMBold, + surfaceAccent, + surfaceSolidDefault, + textAccent, + textAccentActive, + textAccentMinor, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'divider', @@ -8,31 +18,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-accent); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textAccent}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-accent-minor); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-accent-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textAccentMinor}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textAccentActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: default; ${tabsTokens.itemCursorOverNotSelected}: pointer; @@ -50,32 +60,32 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-bold-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-bold-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-bold-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-bold-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-bold-line-height); + ${tabsTokens.fontFamily}: ${bodyMBold.fontFamily}; + ${tabsTokens.fontSize}: ${bodyMBold.fontSize}; + ${tabsTokens.fontStyle}: ${bodyMBold.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyMBold.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyMBold.lineHeight}; - ${tabsTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tabsTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.valueFontSize}: ${bodyM.fontSize}; + ${tabsTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${tabsTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.valueLineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, }, disabled: { true: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-secondary); - ${tabsTokens.itemColorHover}: var(--text-secondary); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); - ${tabsTokens.itemSelectedColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; + ${tabsTokens.itemColorHover}: ${textSecondary}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondary}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; + ${tabsTokens.itemSelectedColor}: ${textSecondary}; ${tabsTokens.itemSelectedDividerColor}: none; ${tabsTokens.itemSelectedDividerColorHover}: none; `, diff --git a/packages/sdds-cs/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/sdds-cs/src/components/Tabs/vertical/VerticalTabs.config.ts index 6e06d953a07..68c5f53bd02 100644 --- a/packages/sdds-cs/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/sdds-cs/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,5 +1,12 @@ +import { + outlineSolidPrimary, + surfaceAccent, + textAccent, + textAccentActive, + textAccentMinor, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'divider', @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-accent); - ${tabsTokens.arrowColorHover}: var(--text-accent-minor); - ${tabsTokens.arrowColorActive}: var(--text-accent-active); + ${tabsTokens.arrowColor}: ${textAccent}; + ${tabsTokens.arrowColorHover}: ${textAccentMinor}; + ${tabsTokens.arrowColorActive}: ${textAccentActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--outline-solid-primary); + ${tabsTokens.tabsDividerColor}: ${outlineSolidPrimary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, @@ -36,14 +43,14 @@ export const config = { }, disabled: { true: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-secondary); - ${tabsTokens.itemColorHover}: var(--text-secondary); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); - ${tabsTokens.itemSelectedColor}: var(--text-secondary); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; + ${tabsTokens.itemColorHover}: ${textSecondary}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondary}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; + ${tabsTokens.itemSelectedColor}: ${textSecondary}; ${tabsTokens.itemSelectedDividerColor}: none; ${tabsTokens.itemSelectedDividerColorHover}: none; ${tabsTokens.tabsDividerColor}: transparent; diff --git a/packages/sdds-cs/src/components/TextField/TextField.clear.config.ts b/packages/sdds-cs/src/components/TextField/TextField.clear.config.ts index e84fe406760..b65f62b9c9f 100644 --- a/packages/sdds-cs/src/components/TextField/TextField.clear.config.ts +++ b/packages/sdds-cs/src/components/TextField/TextField.clear.config.ts @@ -1,5 +1,28 @@ +import { + bodyM, + bodyS, + bodyXS, + outlineSolidPrimary, + outlineSolidSecondary, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidPrimary, + textAccent, + textAccentActive, + textAccentMinor, + textNegative, + textNegativeActive, + textNegativeHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'default', @@ -9,69 +32,69 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - ${tokens.contentSlotRightColor}: var(--text-accent); - ${tokens.contentSlotRightColorHover}: var(--text-accent-minor); - ${tokens.contentSlotRightColorActive}: var(--text-accent-active); - - ${tokens.dividerColor}: var(--outline-solid-primary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + ${tokens.contentSlotRightColor}: ${textAccent}; + ${tokens.contentSlotRightColorHover}: ${textAccentMinor}; + ${tokens.contentSlotRightColorActive}: ${textAccentActive}; + + ${tokens.dividerColor}: ${outlineSolidPrimary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-negative); + ${tokens.color}: ${textNegative}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-negative); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textNegative}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-secondary); - ${tokens.textAfterColor}: var(--text-secondary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-negative); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textSecondary}; + ${tokens.textAfterColor}: ${textSecondary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textNegative}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -84,40 +107,40 @@ export const config = { ${tokens.leftContentMargin}: -0.1875rem 0.25rem -0.1875rem 0; ${tokens.rightContentMargin}: -0.1875rem 0 -0.1875rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.1063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.leftHelperFontFamily}: ${bodyS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -132,12 +155,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -152,10 +175,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -168,12 +191,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -192,12 +215,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -211,22 +234,22 @@ export const config = { disabled: { true: css` ${tokens.disabledOpacity}: 1; - ${tokens.dividerColor}: var(--surface-solid-primary); - ${tokens.dividerColorHover}: var(--surface-solid-primary); - ${tokens.dividerColorFocus}: var(--surface-solid-primary); - ${tokens.color}: var(--text-secondary); + ${tokens.dividerColor}: ${surfaceSolidPrimary}; + ${tokens.dividerColorHover}: ${surfaceSolidPrimary}; + ${tokens.dividerColorFocus}: ${surfaceSolidPrimary}; + ${tokens.color}: ${textSecondary}; `, }, readOnly: { true: css` ${tokens.readOnlyOpacity}: 1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-clear); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--outline-solid-secondary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceClear}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${outlineSolidSecondary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-cs/src/components/Toast/Toast.config.ts b/packages/sdds-cs/src/components/Toast/Toast.config.ts index cabf1f773ea..ed4441b921b 100644 --- a/packages/sdds-cs/src/components/Toast/Toast.config.ts +++ b/packages/sdds-cs/src/components/Toast/Toast.config.ts @@ -1,5 +1,19 @@ +import { + bodyM, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextAccent, + onDarkTextAccentMinor, + onDarkTextPrimary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextAccent, + onLightTextAccentMinor, + onLightTextPrimary, + surfaceSolidCardBrightness, + textAccent, + textAccentMinor, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, toastTokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'default', @@ -9,33 +23,33 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-accent); - ${toastTokens.closeIconColorOnHover}: var(--text-accent-minor); + ${toastTokens.closeIconColor}: ${textAccent}; + ${toastTokens.closeIconColorOnHover}: ${textAccentMinor}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-accent); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-accent-minor); + ${toastTokens.closeIconColor}: ${onDarkTextAccent}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextAccentMinor}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-accent); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-accent-minor); + ${toastTokens.closeIconColor}: ${onLightTextAccent}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextAccentMinor}; `, }, size: { @@ -44,12 +58,12 @@ export const config = { ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${toastTokens.fontFamily}: ${bodyM.fontFamily}; + ${toastTokens.fontSize}: ${bodyM.fontSize}; + ${toastTokens.fontStyle}: ${bodyM.fontStyle}; + ${toastTokens.fontWeight}: ${bodyM.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyM.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.5rem -0.0625rem 0rem; ${toastTokens.closeIconMargin}: -0.0625rem 0.125rem -0.0625rem 0.75rem; diff --git a/packages/sdds-cs/src/components/ToastNew/ToastNew.config.ts b/packages/sdds-cs/src/components/ToastNew/ToastNew.config.ts index d53a03f9554..a451d50e52b 100644 --- a/packages/sdds-cs/src/components/ToastNew/ToastNew.config.ts +++ b/packages/sdds-cs/src/components/ToastNew/ToastNew.config.ts @@ -1,5 +1,11 @@ +import { + bodyM, + surfaceSolidCardBrightness, + textAccent, + textAccentMinor, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, toastNewTokens as toastTokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'default', @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-accent); - ${toastTokens.closeIconColorOnHover}: var(--text-accent-minor); + ${toastTokens.closeIconColor}: ${textAccent}; + ${toastTokens.closeIconColorOnHover}: ${textAccentMinor}; `, }, size: { @@ -25,12 +31,12 @@ export const config = { ${toastTokens.closeIconMargin}: -0.0625rem 0.125rem -0.0625rem 0.75rem; ${toastTokens.contentLeftMargin}: -0.0625rem 0.5rem -0.0625rem 0rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${toastTokens.fontFamily}: ${bodyM.fontFamily}; + ${toastTokens.fontSize}: ${bodyM.fontSize}; + ${toastTokens.fontStyle}: ${bodyM.fontStyle}; + ${toastTokens.fontWeight}: ${bodyM.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyM.lineHeight}; `, }, pilled: { diff --git a/packages/sdds-cs/src/components/Tooltip/Tooltip.config.ts b/packages/sdds-cs/src/components/Tooltip/Tooltip.config.ts index f1d83b7a08a..816bf3a3fcc 100644 --- a/packages/sdds-cs/src/components/Tooltip/Tooltip.config.ts +++ b/packages/sdds-cs/src/components/Tooltip/Tooltip.config.ts @@ -1,5 +1,10 @@ +import { + bodyS, + inverseSurfaceSolidCard, + inverseTextPrimary, + onDarkSurfaceSolidSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'default', @@ -16,12 +21,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -35,16 +40,16 @@ export const config = { view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--inverse-surface-solid-card); - ${tooltipTokens.arrowBackground}: var(--inverse-surface-solid-card); + ${tooltipTokens.backgroundColor}: ${inverseSurfaceSolidCard}; + ${tooltipTokens.arrowBackground}: ${inverseSurfaceSolidCard}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--inverse-text-primary); + ${tooltipTokens.color}: ${inverseTextPrimary}; `, secondary: css` - ${tooltipTokens.backgroundColor}: var(--on-dark-surface-solid-secondary); - ${tooltipTokens.arrowBackground}: var(--on-dark-surface-solid-secondary); + ${tooltipTokens.backgroundColor}: ${onDarkSurfaceSolidSecondary}; + ${tooltipTokens.arrowBackground}: ${onDarkSurfaceSolidSecondary}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--inverse-text-primary); + ${tooltipTokens.color}: ${inverseTextPrimary}; `, }, }, diff --git a/packages/sdds-cs/src/components/Tree/Tree.config.ts b/packages/sdds-cs/src/components/Tree/Tree.config.ts index 1588df2b67b..11646423ef7 100644 --- a/packages/sdds-cs/src/components/Tree/Tree.config.ts +++ b/packages/sdds-cs/src/components/Tree/Tree.config.ts @@ -1,5 +1,17 @@ +import { + bodyM, + surfacePositive, + surfaceSolidDefault, + surfaceSolidPrimary, + surfaceSolidPrimaryActive, + surfaceTransparentAccent, + textAccent, + textAccentActive, + textAccentMinor, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/emotion'; - export const config = { defaults: { view: 'default', @@ -8,23 +20,23 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-accent); - ${tokens.arrowColorHover}: var(--text-accent-minor); - ${tokens.arrowColorActive}: var(--text-accent-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-solid-primary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textAccent}; + ${tokens.arrowColorHover}: ${textAccentMinor}; + ${tokens.arrowColorActive}: ${textAccentActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceSolidPrimary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-accent); - ${tokens.itemBackgroundColorActive}: var(--surface-solid-primary-active); - ${tokens.checkboxBorderColor}: var(--text-accent); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentAccent}; + ${tokens.itemBackgroundColorActive}: ${surfaceSolidPrimaryActive}; + ${tokens.checkboxBorderColor}: ${textAccent}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 1; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -52,12 +64,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/sdds-cs/src/components/Typography/Body.config.ts b/packages/sdds-cs/src/components/Typography/Body.config.ts index 2cc0211fc12..dc24f9b0d11 100644 --- a/packages/sdds-cs/src/components/Typography/Body.config.ts +++ b/packages/sdds-cs/src/components/Typography/Body.config.ts @@ -1,5 +1,21 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/emotion'; - export const configL = { defaults: { size: 'l', @@ -7,14 +23,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +43,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +63,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +83,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +103,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-cs/src/components/Typography/Dspl.config.ts b/packages/sdds-cs/src/components/Typography/Dspl.config.ts index b79280021e1..60a6edf55e1 100644 --- a/packages/sdds-cs/src/components/Typography/Dspl.config.ts +++ b/packages/sdds-cs/src/components/Typography/Dspl.config.ts @@ -1,5 +1,15 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/emotion'; - export const configL = { defaults: { size: 'l', @@ -7,14 +17,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +37,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +57,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/sdds-cs/src/components/Typography/Heading.config.ts b/packages/sdds-cs/src/components/Typography/Heading.config.ts index c5a38b49d04..8e2d539c173 100644 --- a/packages/sdds-cs/src/components/Typography/Heading.config.ts +++ b/packages/sdds-cs/src/components/Typography/Heading.config.ts @@ -1,5 +1,21 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/emotion'; - export const configH1 = { defaults: { size: 'h1', @@ -7,14 +23,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +42,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +61,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +80,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +99,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, diff --git a/packages/sdds-cs/src/components/Typography/Text.config.ts b/packages/sdds-cs/src/components/Typography/Text.config.ts index 030b5c7dfa9..93a98d06161 100644 --- a/packages/sdds-cs/src/components/Typography/Text.config.ts +++ b/packages/sdds-cs/src/components/Typography/Text.config.ts @@ -1,3 +1,17 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_cs'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/emotion'; export const configL = { @@ -7,14 +21,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +41,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +61,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +81,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, From 2159626eda3b9c7aac0ab08fd631176fe08795c1 Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 19:28:35 +0300 Subject: [PATCH 13/24] chore(sdds-dfa): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 285 +++-- .../src/components/Attach/Attach.config.ts | 899 +++++++------- .../Autocomplete/Autocomplete.config.ts | 553 +++++---- .../src/components/Badge/Badge.config.ts | 148 ++- .../Breadcrumbs/Breadcrumbs.config.ts | 68 +- .../src/components/Button/Button.config.ts | 258 ++-- .../ButtonGroup/ButtonGroup.config.ts | 300 +++-- .../components/Calendar/Calendar.config.ts | 460 ++++---- .../Calendar/CalendarDouble.config.ts | 460 ++++---- .../src/components/Card/Card.config.ts | 3 +- .../components/Carousel/Carousel.config.ts | 24 +- .../src/components/Cell/Cell.config.ts | 169 +-- .../components/Checkbox/Checkbox.config.ts | 156 +-- .../components/ChipGroup/ChipGroup.config.ts | 102 +- .../components/CodeField/CodeField.config.ts | 85 +- .../components/Combobox/Combobox.config.ts | 753 ++++++------ .../src/components/Counter/Counter.config.ts | 103 +- .../DatePicker/DatePicker.clear.config.ts | 1035 ++++++++-------- .../DatePicker/DatePicker.config.ts | 1022 ++++++++-------- .../DateTimePicker/DateTimePicker.config.ts | 954 ++++++++------- .../src/components/Divider/Divider.config.ts | 14 +- .../src/components/Drawer/Drawer.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 132 ++- .../components/Dropzone/Dropzone.config.ts | 53 +- .../EmbedIconButton/EmbedIconButton.config.ts | 125 +- .../EmptyState/EmptyState.config.ts | 49 +- .../src/components/File/File.config.ts | 158 +-- .../IconButton/IconButton.config.ts | 182 +-- .../LinkButton/LinkButton.config.ts | 210 ++-- .../src/components/List/List.config.ts | 77 +- .../src/components/Modal/Modal.config.ts | 20 +- .../src/components/Note/Note.config.ts | 164 +-- .../Notification/Notification.config.ts | 196 +-- .../NumberInput/NumberInput.config.ts | 289 +++-- .../Pagination/Pagination.config.ts | 220 ++-- .../src/components/Popover/Popover.config.ts | 5 +- .../components/Progress/Progress.config.ts | 60 +- .../ProgressBarCircular.config.ts | 146 ++- .../components/Radiobox/Radiobox.config.ts | 154 +-- .../components/Range/Range.clear.config.ts | 484 ++++---- .../src/components/Range/Range.config.ts | 467 ++++---- .../src/components/Rating/Rating.config.ts | 385 +++--- .../components/Segment/SegmentGroup.config.ts | 11 +- .../components/Segment/SegmentItem.config.ts | 168 +-- .../src/components/Select/Select.config.ts | 1046 +++++++++-------- .../Skeleton/LineSkeleton.config.ts | 108 +- .../src/components/Slider/Slider.config.ts | 209 ++-- .../src/components/Steps/Steps.config.ts | 332 +++--- .../src/components/Switch/Switch.config.ts | 103 +- .../src/components/Table/Table.config.ts | 180 +-- .../HorizontalIconTabItem.config.ts | 70 +- .../horizontal/HorizontalTabItem.config.ts | 258 ++-- .../Tabs/horizontal/HorizontalTabs.config.ts | 25 +- .../vertical/VerticalIconTabItem.config.ts | 23 +- .../Tabs/vertical/VerticalTabItem.config.ts | 90 +- .../Tabs/vertical/VerticalTabs.config.ts | 17 +- .../TextArea/TextArea.clear.config.ts | 443 +++---- .../components/TextArea/TextArea.config.ts | 642 +++++----- .../TextField/TextField.clear.config.ts | 789 +++++++------ .../components/TextField/TextField.config.ts | 811 +++++++------ .../TextFieldGroup/TextFieldGroup.config.ts | 193 +-- .../TextFieldSlider.clear.config.ts | 606 +++++----- .../TextFieldSlider/TextFieldSlider.config.ts | 658 ++++++----- .../TimePicker/TimePicker.config.ts | 331 +++--- .../src/components/Toast/Toast.config.ts | 70 +- .../src/components/Toolbar/Toolbar.config.ts | 11 +- .../src/components/Tooltip/Tooltip.config.ts | 33 +- .../src/components/Tree/Tree.config.ts | 106 +- .../src/components/Typography/Body.config.ts | 97 +- .../src/components/Typography/Dspl.config.ts | 59 +- .../components/Typography/Heading.config.ts | 116 +- .../src/components/Typography/Text.config.ts | 78 +- 72 files changed, 10333 insertions(+), 8791 deletions(-) diff --git a/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts b/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts index d70ce2c93e6..ebd255187d2 100644 --- a/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-dfa/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,28 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,12 +36,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, @@ -24,14 +49,14 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -42,19 +67,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.875rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyLBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -63,19 +88,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -84,19 +109,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -105,19 +130,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXSBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.lineHeight}; `, h2: css` ${accordionTokens.accordionItemPaddingVertical}: 1rem; @@ -126,19 +151,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h2Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -147,19 +172,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 0.688rem; @@ -167,19 +192,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h5: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -187,19 +212,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h6: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -207,19 +232,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h6Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Attach/Attach.config.ts b/packages/sdds-dfa/src/components/Attach/Attach.config.ts index b62ab061eec..e04b96bd72c 100644 --- a/packages/sdds-dfa/src/components/Attach/Attach.config.ts +++ b/packages/sdds-dfa/src/components/Attach/Attach.config.ts @@ -1,3 +1,54 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,439 +61,439 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.buttonColorActive}: var(--text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.buttonColorHover}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.buttonColorActive}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.iconButtonColorHover}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.iconButtonColorActive}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary-hover); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.buttonColorActive}: var(--text-primary-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColorHover}: ${textPrimaryHover}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.buttonColorActive}: ${textPrimaryActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary-hover); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonColorActive}: var(--text-primary-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonColorActive}: ${textPrimaryActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, success: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-positive); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfacePositive}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, warning: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-warning); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceWarning}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, critical: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-negative); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceNegative}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-negative-active); - - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; + + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, dark: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, black: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, white: css` - ${attachTokens.buttonColor}: var(--on-light-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.buttonColor}: ${onLightTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -457,12 +508,12 @@ export const config = { ${attachTokens.buttonWidth}: 12.5rem; ${attachTokens.buttonPadding}: 1.5rem; ${attachTokens.buttonRadius}: 0.875rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyL.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -481,37 +532,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonHeight}: 3.5rem; ${attachTokens.iconButtonWidth}: 3.5rem; ${attachTokens.iconButtonPadding}: 1.5rem; ${attachTokens.iconButtonRadius}: 0.875rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -520,12 +571,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -547,12 +598,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -571,37 +622,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -610,12 +661,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -637,12 +688,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -661,37 +712,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -700,12 +751,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -727,12 +778,12 @@ export const config = { ${attachTokens.buttonWidth}: 10rem; ${attachTokens.buttonPadding}: 0.75rem; ${attachTokens.buttonRadius}: 0.5rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -751,37 +802,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.25rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2rem; ${attachTokens.iconButtonWidth}: 2rem; ${attachTokens.iconButtonPadding}: 0.75rem; ${attachTokens.iconButtonRadius}: 0.5rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -790,12 +841,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/sdds-dfa/src/components/Autocomplete/Autocomplete.config.ts b/packages/sdds-dfa/src/components/Autocomplete/Autocomplete.config.ts index 445f4504839..d68f9c53d6c 100644 --- a/packages/sdds-dfa/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/sdds-dfa/src/components/Autocomplete/Autocomplete.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,172 +40,172 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-positive); - ${tokens.textFieldDividerColorHover}: var(--surface-positive); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfacePositive}; + ${tokens.textFieldDividerColorHover}: ${surfacePositive}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-warning); - ${tokens.textFieldDividerColorHover}: var(--surface-warning); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceWarning}; + ${tokens.textFieldDividerColorHover}: ${surfaceWarning}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--surface-negative); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${surfaceNegative}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, }, size: { @@ -193,21 +224,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -215,12 +246,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -240,12 +271,12 @@ export const config = { ${tokens.itemPadding}: 1.0625rem 1rem; ${tokens.itemBorderRadius}: 0.75rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; ${tokens.emptyStateGap}: 0.5rem; @@ -268,21 +299,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -290,12 +321,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -315,12 +346,12 @@ export const config = { ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; ${tokens.emptyStateGap}: 0.375rem; @@ -343,21 +374,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -365,12 +396,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -390,12 +421,12 @@ export const config = { ${tokens.itemPadding}: 0.6875rem 0.75rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -418,21 +449,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -440,12 +471,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -465,12 +496,12 @@ export const config = { ${tokens.itemPadding}: 0.5625rem 0.5rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; ${tokens.emptyStateGap}: 0.25rem; @@ -481,22 +512,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -509,12 +540,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -533,12 +564,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -556,14 +587,14 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Badge/Badge.config.ts b/packages/sdds-dfa/src/components/Badge/Badge.config.ts index 3d8e8df196e..b6fefb418a6 100644 --- a/packages/sdds-dfa/src/components/Badge/Badge.config.ts +++ b/packages/sdds-dfa/src/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +36,67 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -78,12 +106,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -97,12 +125,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -116,12 +144,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -135,12 +163,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -159,7 +187,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/sdds-dfa/src/components/Breadcrumbs/Breadcrumbs.config.ts index 1661a5df0e3..dd322f48416 100644 --- a/packages/sdds-dfa/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/sdds-dfa/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,53 +20,53 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { l: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.5rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-l-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-l-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-l-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-l-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-l-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight}; `, m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${breadcrumbsTokens.breadcrumbsGap}: 0rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-xs-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-xs-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-xs-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-xs-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-xs-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Button/Button.config.ts b/packages/sdds-dfa/src/components/Button/Button.config.ts index 5d4e666a7b9..b199773ba1f 100644 --- a/packages/sdds-dfa/src/components/Button/Button.config.ts +++ b/packages/sdds-dfa/src/components/Button/Button.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,104 +53,104 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -115,12 +159,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.75rem; ${buttonTokens.buttonRadius}: 1rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.5rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -136,12 +180,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 0.875rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -157,12 +201,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -178,12 +222,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -199,12 +243,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -220,12 +264,12 @@ export const config = { ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: 0.375rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 0.75rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -244,7 +288,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/sdds-dfa/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/sdds-dfa/src/components/ButtonGroup/ButtonGroup.config.ts index 38cdcc186d3..edbed0de23e 100644 --- a/packages/sdds-dfa/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/sdds-dfa/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,124 +56,124 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, success: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; `, }, size: { @@ -136,12 +184,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 4rem; ${buttonGroupTokens.buttonPadding}: 1.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, l: css` ${buttonGroupTokens.buttonDefaultRadius}: 0.875rem; @@ -150,12 +198,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3.5rem; ${buttonGroupTokens.buttonPadding}: 1.5rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, m: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -165,12 +213,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -179,12 +227,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -193,12 +241,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -207,12 +255,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 1.5rem; ${buttonGroupTokens.buttonPadding}: 0.625rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-dfa/src/components/Calendar/Calendar.config.ts b/packages/sdds-dfa/src/components/Calendar/Calendar.config.ts index fc0a15388db..07f23a79af3 100644 --- a/packages/sdds-dfa/src/components/Calendar/Calendar.config.ts +++ b/packages/sdds-dfa/src/components/Calendar/Calendar.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,38 +35,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -51,46 +77,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +126,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 4rem; ${calendarBaseTokens.iconButtonWidth}: 4rem; @@ -120,46 +146,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -169,13 +195,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3.5rem; ${calendarBaseTokens.iconButtonWidth}: 3.5rem; @@ -189,46 +215,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -238,13 +264,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -258,46 +284,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -307,13 +333,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -327,46 +353,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -376,13 +402,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; @@ -400,12 +426,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -414,7 +440,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -425,12 +451,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -439,7 +465,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-dfa/src/components/Calendar/CalendarDouble.config.ts index 70c9a8be880..47738976f1b 100644 --- a/packages/sdds-dfa/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-dfa/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,39 +35,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -52,46 +78,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +127,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 4rem; ${calendarDoubleTokens.iconButtonWidth}: 4rem; @@ -121,46 +147,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -170,13 +196,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; @@ -190,46 +216,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -239,13 +265,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -259,46 +285,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -308,13 +334,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -328,46 +354,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +403,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; @@ -401,12 +427,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -415,7 +441,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -426,12 +452,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -440,7 +466,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Card/Card.config.ts b/packages/sdds-dfa/src/components/Card/Card.config.ts index 2899613fb13..b067505503b 100644 --- a/packages/sdds-dfa/src/components/Card/Card.config.ts +++ b/packages/sdds-dfa/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,7 +9,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/sdds-dfa/src/components/Carousel/Carousel.config.ts b/packages/sdds-dfa/src/components/Carousel/Carousel.config.ts index f3fd82e4491..1c404f6ecd1 100644 --- a/packages/sdds-dfa/src/components/Carousel/Carousel.config.ts +++ b/packages/sdds-dfa/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +16,14 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary); - ${tokens.paginationDotActiveBackground}: var(--surface-solid-default); - ${tokens.controlIconButtonColor}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.controlIconButtonColorHover}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.controlIconButtonColorActive}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary}; + ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault}; + ${tokens.controlIconButtonColor}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.controlIconButtonColorHover}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.controlIconButtonColorActive}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, }, size: { diff --git a/packages/sdds-dfa/src/components/Cell/Cell.config.ts b/packages/sdds-dfa/src/components/Cell/Cell.config.ts index 6588088c11f..ea9f7386dc6 100644 --- a/packages/sdds-dfa/src/components/Cell/Cell.config.ts +++ b/packages/sdds-dfa/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -87,26 +88,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -119,26 +120,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Checkbox/Checkbox.config.ts b/packages/sdds-dfa/src/components/Checkbox/Checkbox.config.ts index 53d71aca8ad..45f1000fd75 100644 --- a/packages/sdds-dfa/src/components/Checkbox/Checkbox.config.ts +++ b/packages/sdds-dfa/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,18 +33,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -39,18 +55,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${checkboxTokens.margin}: 0; @@ -60,91 +76,91 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.125rem; ${checkboxTokens.contentTopOffset}: 0.0625rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyL.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${checkboxTokens.fillColor}: var(--text-primary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPrimary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${checkboxTokens.fillColor}: var(--text-secondary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textSecondary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${checkboxTokens.fillColor}: var(--text-tertiary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textTertiary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${checkboxTokens.fillColor}: var(--text-paragraph); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textParagraph}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${checkboxTokens.fillColor}: var(--text-positive); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPositive}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${checkboxTokens.fillColor}: var(--text-warning); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textWarning}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, negative: css` - ${checkboxTokens.fillColor}: var(--text-negative); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textNegative}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-negative); + ${checkboxTokens.triggerBorderColor}: ${textNegative}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -155,7 +171,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-dfa/src/components/ChipGroup/ChipGroup.config.ts b/packages/sdds-dfa/src/components/ChipGroup/ChipGroup.config.ts index 2bed06ad8c0..255c5d9cac2 100644 --- a/packages/sdds-dfa/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/sdds-dfa/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +26,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +57,12 @@ export const config = { ${tokens.chipHeight}: 3rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.5rem; @@ -60,12 +78,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -81,12 +99,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; @@ -102,12 +120,12 @@ export const config = { ${tokens.chipHeight}: 1.5rem; ${tokens.chipPadding}: 0 0.625rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/sdds-dfa/src/components/CodeField/CodeField.config.ts b/packages/sdds-dfa/src/components/CodeField/CodeField.config.ts index d0109404d66..a6e28403071 100644 --- a/packages/sdds-dfa/src/components/CodeField/CodeField.config.ts +++ b/packages/sdds-dfa/src/components/CodeField/CodeField.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodyXS, + outlineAccent, + surfaceAccent, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, codeFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,19 +26,19 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--surface-accent); + ${tokens.caretColor}: ${surfaceAccent}; - ${tokens.captionColor}: var(--text-secondary); - ${tokens.captionColorError}: var(--text-negative); + ${tokens.captionColor}: ${textSecondary}; + ${tokens.captionColorError}: ${textNegative}; - ${tokens.codeColor}: var(--text-primary); - ${tokens.codeColorError}: var(--text-negative); - ${tokens.borderColorFocus}: var(--outline-accent); + ${tokens.codeColor}: ${textPrimary}; + ${tokens.codeColorError}: ${textNegative}; + ${tokens.borderColorFocus}: ${outlineAccent}; - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; `, }, size: { @@ -34,19 +51,19 @@ export const config = { ${tokens.codeItemWidth}: 2.75rem; ${tokens.codeItemHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.captionFontFamily}: ${bodyS.fontFamily}; + ${tokens.captionFontSize}: ${bodyS.fontSize}; + ${tokens.captionFontStyle}: ${bodyS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyS.lineHeight}; ${tokens.borderRadius}: 0.875rem; ${tokens.borderRadiusSegmented}: 0.375rem; @@ -61,19 +78,19 @@ export const config = { ${tokens.codeItemWidth}: 2.375rem; ${tokens.codeItemHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.captionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.captionFontSize}: ${bodyXS.fontSize}; + ${tokens.captionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyXS.lineHeight}; ${tokens.borderRadius}: 0.75rem; ${tokens.borderRadiusSegmented}: 0.25rem; diff --git a/packages/sdds-dfa/src/components/Combobox/Combobox.config.ts b/packages/sdds-dfa/src/components/Combobox/Combobox.config.ts index 9b023838c5d..8a52d76e78c 100644 --- a/packages/sdds-dfa/src/components/Combobox/Combobox.config.ts +++ b/packages/sdds-dfa/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,221 +40,221 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -243,20 +274,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -264,12 +295,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -292,12 +323,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 1rem; ${tokens.padding}: 0.125rem; @@ -319,19 +350,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -364,20 +395,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -385,12 +416,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -413,12 +444,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -440,19 +471,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -485,20 +516,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -506,12 +537,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -534,12 +565,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 0.625rem 0.875rem 0.625rem 0.875rem; ${tokens.padding}: 0.125rem; @@ -561,19 +592,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -606,20 +637,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -627,12 +658,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -655,12 +686,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 0.5rem 0.625rem 0.5rem 0.625rem; ${tokens.padding}: 0.125rem; @@ -682,19 +713,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -714,22 +745,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -742,12 +773,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -766,12 +797,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -789,13 +820,13 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Counter/Counter.config.ts b/packages/sdds-dfa/src/components/Counter/Counter.config.ts index 140aa43a57f..62adf783d04 100644 --- a/packages/sdds-dfa/src/components/Counter/Counter.config.ts +++ b/packages/sdds-dfa/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,32 +23,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -41,56 +56,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-dfa/src/components/DatePicker/DatePicker.clear.config.ts b/packages/sdds-dfa/src/components/DatePicker/DatePicker.clear.config.ts index c2e334a638a..251a7ae74c7 100644 --- a/packages/sdds-dfa/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/sdds-dfa/src/components/DatePicker/DatePicker.clear.config.ts @@ -1,3 +1,46 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,64 +51,64 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); + ${tokens.outlineFocusColor}: ${surfaceAccent}; ${tokens.background}: transparent; ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.focusColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.focusColor}: ${textAccent}; ${tokens.textFieldBackgroundColor}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -74,76 +117,76 @@ export const config = { ${tokens.textFieldBackgroundSuccessColor}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -152,12 +195,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -167,12 +210,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -198,30 +241,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}:0.82rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; @@ -239,46 +282,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -289,25 +332,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -318,12 +361,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -333,12 +376,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -369,30 +412,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -410,46 +453,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -460,25 +503,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -489,12 +532,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -504,12 +547,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -540,30 +583,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -581,46 +624,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -631,25 +674,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -660,12 +703,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -675,12 +718,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -711,30 +754,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -752,46 +795,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -802,25 +845,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -831,12 +874,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -846,12 +889,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -882,30 +925,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -923,46 +966,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -973,25 +1016,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -1008,12 +1051,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1022,7 +1065,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1033,12 +1076,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1047,15 +1090,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1068,12 +1111,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1092,12 +1135,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1116,15 +1159,15 @@ export const config = { readOnly: { true: css` ${tokens.backgroundReadOnly}: transparent; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-dfa/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-dfa/src/components/DatePicker/DatePicker.config.ts index aba695d13e2..8326e1cc82f 100644 --- a/packages/sdds-dfa/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-dfa/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,110 +51,110 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -121,12 +163,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -136,12 +178,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -165,30 +207,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -206,46 +248,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -256,25 +298,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -285,12 +327,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -300,12 +342,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -335,30 +377,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -376,46 +418,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -426,25 +468,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -455,12 +497,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -470,12 +512,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -505,30 +547,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -546,46 +588,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -596,25 +638,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -625,12 +667,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -640,12 +682,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -675,30 +717,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -716,46 +758,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -766,25 +808,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -795,12 +837,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -810,12 +852,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -845,30 +887,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -886,46 +928,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -936,25 +978,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -971,12 +1013,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -985,7 +1027,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -996,12 +1038,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1010,15 +1052,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1031,12 +1073,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1055,12 +1097,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1078,16 +1120,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-dfa/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/sdds-dfa/src/components/DateTimePicker/DateTimePicker.config.ts index 6ac3406a0e3..cb50acc1528 100644 --- a/packages/sdds-dfa/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/sdds-dfa/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,91 +52,91 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -113,30 +155,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -146,12 +188,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -168,46 +210,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.875rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.875rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.875rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -218,13 +260,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; @@ -237,21 +279,21 @@ export const config = { ${tokens.timePickerItemHeight}: 4rem; ${tokens.timePickerItemBorderRadius}: 0.875rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -272,30 +314,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -305,12 +347,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -327,46 +369,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +419,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; @@ -396,21 +438,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3.5rem; ${tokens.timePickerItemBorderRadius}: 0.75rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -431,30 +473,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +506,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -486,46 +528,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -536,13 +578,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; @@ -555,21 +597,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3rem; ${tokens.timePickerItemBorderRadius}: 0.625rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyM.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyM.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyM.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -590,30 +632,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -623,12 +665,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -645,46 +687,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -695,13 +737,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -714,21 +756,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -749,30 +791,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -782,12 +824,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -804,46 +846,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -854,13 +896,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -873,21 +915,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -962,12 +1004,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -976,7 +1018,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -987,12 +1029,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1001,7 +1043,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -1011,12 +1053,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-dfa/src/components/Divider/Divider.config.ts b/packages/sdds-dfa/src/components/Divider/Divider.config.ts index df0449d5c06..b4b903a8a9d 100644 --- a/packages/sdds-dfa/src/components/Divider/Divider.config.ts +++ b/packages/sdds-dfa/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/sdds-dfa/src/components/Drawer/Drawer.config.ts b/packages/sdds-dfa/src/components/Drawer/Drawer.config.ts index b0b00b15040..36d7700decf 100644 --- a/packages/sdds-dfa/src/components/Drawer/Drawer.config.ts +++ b/packages/sdds-dfa/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/sdds-dfa/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-dfa/src/components/Dropdown/Dropdown.config.ts index f14dd28fbd7..82d58cfcf91 100644 --- a/packages/sdds-dfa/src/components/Dropdown/Dropdown.config.ts +++ b/packages/sdds-dfa/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,11 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -24,12 +32,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.5rem; ${tokens.dividerMarginBottomTight}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -37,12 +45,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.padding}: 0.125rem; @@ -61,12 +69,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -74,12 +82,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.padding}: 0.125rem; @@ -98,12 +106,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -111,12 +119,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 0.125rem; @@ -135,12 +143,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -148,12 +156,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.padding}: 0.125rem; @@ -172,12 +180,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.125rem; ${tokens.dividerMarginBottomTight}: 0.125rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -185,18 +193,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-dfa/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..d4f77673011 100644 --- a/packages/sdds-dfa/src/components/Dropzone/Dropzone.config.ts +++ b/packages/sdds-dfa/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-dfa/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/sdds-dfa/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..b74750e09c7 100644 --- a/packages/sdds-dfa/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/sdds-dfa/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-dfa/src/components/EmptyState/EmptyState.config.ts b/packages/sdds-dfa/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..a05caf65e9e 100644 --- a/packages/sdds-dfa/src/components/EmptyState/EmptyState.config.ts +++ b/packages/sdds-dfa/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-dfa/src/components/File/File.config.ts b/packages/sdds-dfa/src/components/File/File.config.ts index 455a87f891b..4d0ae7c5805 100644 --- a/packages/sdds-dfa/src/components/File/File.config.ts +++ b/packages/sdds-dfa/src/components/File/File.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, fileTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +24,36 @@ export const config = { variations: { view: { default: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-secondary); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textSecondary}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-solid-default); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; `, negative: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-negative); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textNegative}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-negative); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceNegative}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-negative); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceNegative}; `, }, size: { @@ -52,19 +68,19 @@ export const config = { ${tokens.cellGap}: 0.75rem; ${tokens.cellPaddingRightContent}: 0.75rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -94,19 +110,19 @@ export const config = { ${tokens.cellGap}: 0.625rem; ${tokens.cellPaddingRightContent}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -136,19 +152,19 @@ export const config = { ${tokens.cellGap}: 0.5rem; ${tokens.cellPaddingRightContent}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -178,19 +194,19 @@ export const config = { ${tokens.cellGap}: 0.375rem; ${tokens.cellPaddingRightContent}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 24; ${tokens.progressBarCircularHeight}: 1.5rem; diff --git a/packages/sdds-dfa/src/components/IconButton/IconButton.config.ts b/packages/sdds-dfa/src/components/IconButton/IconButton.config.ts index 9d760c4f3f2..d50d78c9c7d 100644 --- a/packages/sdds-dfa/src/components/IconButton/IconButton.config.ts +++ b/packages/sdds-dfa/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,74 +49,74 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -85,12 +125,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 4rem; ${iconButtonTokens.iconButtonPadding}: 1.75rem; ${iconButtonTokens.iconButtonRadius}: 1rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -100,12 +140,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3.5rem; ${iconButtonTokens.iconButtonPadding}: 1.5rem; ${iconButtonTokens.iconButtonRadius}: 0.875rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -115,12 +155,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -130,12 +170,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -145,12 +185,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -163,7 +203,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-dfa/src/components/LinkButton/LinkButton.config.ts b/packages/sdds-dfa/src/components/LinkButton/LinkButton.config.ts index 65d6cd4557f..01b7fb2d430 100644 --- a/packages/sdds-dfa/src/components/LinkButton/LinkButton.config.ts +++ b/packages/sdds-dfa/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +38,70 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, }, size: { @@ -79,12 +109,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 4rem; ${linkButtonTokens.linkButtonPadding}: 1.25rem 0; ${linkButtonTokens.linkButtonRadius}: 1rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.5rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -98,12 +128,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3.5rem; ${linkButtonTokens.linkButtonPadding}: 1rem 0; ${linkButtonTokens.linkButtonRadius}: 0.875rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -117,12 +147,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -136,12 +166,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -155,12 +185,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -174,12 +204,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 1.5rem; ${linkButtonTokens.linkButtonPadding}: 0.375rem 0; ${linkButtonTokens.linkButtonRadius}: 0.375rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 0.75rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/sdds-dfa/src/components/List/List.config.ts b/packages/sdds-dfa/src/components/List/List.config.ts index b0a7acc37b0..3fbd1181104 100644 --- a/packages/sdds-dfa/src/components/List/List.config.ts +++ b/packages/sdds-dfa/src/components/List/List.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +17,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +38,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${listTokens.listItemFontFamily}: ${bodyXS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyXS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyXS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyXS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${listTokens.listItemPaddingTop}: 0.689rem; @@ -46,12 +55,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -63,12 +72,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -80,12 +89,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, xl: css` ${listTokens.listItemPaddingTop}: 1.3125rem; @@ -97,12 +106,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-dfa/src/components/Modal/Modal.config.ts b/packages/sdds-dfa/src/components/Modal/Modal.config.ts index 8b107b98ea3..e5c34ff56f3 100644 --- a/packages/sdds-dfa/src/components/Modal/Modal.config.ts +++ b/packages/sdds-dfa/src/components/Modal/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,16 +16,16 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Note/Note.config.ts b/packages/sdds-dfa/src/components/Note/Note.config.ts index 76e6e79ff13..4986fb1fbc0 100644 --- a/packages/sdds-dfa/src/components/Note/Note.config.ts +++ b/packages/sdds-dfa/src/components/Note/Note.config.ts @@ -1,3 +1,25 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textL, + textLBold, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textSecondary, + textSecondaryHover, + textWarning, + textXS, + textXSBold, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +30,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -44,8 +66,8 @@ export const config = { ${tokens.closeIconTop}: 1rem; ${tokens.closeIconRight}: 1rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -53,20 +75,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 2rem; ${tokens.fixedContentBeforePadding}: 0.25rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.titleFontFamily}: ${textL.fontFamily}; + ${tokens.titleFontSize}: ${textL.fontSize}; + ${tokens.titleFontStyle}: ${textL.fontStyle}; + ${tokens.titleFontWeight}: ${textLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textL.letterSpacing}; + ${tokens.titleLineHeight}: ${textL.lineHeight}; ${tokens.titlePaddingRight}: 1.875rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.textFontFamily}: ${textL.fontFamily}; + ${tokens.textFontSize}: ${textL.fontSize}; + ${tokens.textFontStyle}: ${textL.fontStyle}; + ${tokens.textFontWeight}: ${textL.fontWeight}; + ${tokens.textLetterSpacing}: ${textL.letterSpacing}; + ${tokens.textLineHeight}: ${textL.lineHeight}; `, m: css` ${tokens.padding}: 1.25rem 1.5rem; @@ -78,8 +100,8 @@ export const config = { ${tokens.closeIconTop}: 0.75rem; ${tokens.closeIconRight}: 0.75rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -87,20 +109,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; ${tokens.titlePaddingRight}: 1.75rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -112,8 +134,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -121,20 +143,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.titleFontFamily}: ${textS.fontFamily}; + ${tokens.titleFontSize}: ${textS.fontSize}; + ${tokens.titleFontStyle}: ${textS.fontStyle}; + ${tokens.titleFontWeight}: ${textSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; + ${tokens.titleLineHeight}: ${textS.lineHeight}; ${tokens.titlePaddingRight}: 1.625rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.textFontFamily}: ${textS.fontFamily}; + ${tokens.textFontSize}: ${textS.fontSize}; + ${tokens.textFontStyle}: ${textS.fontStyle}; + ${tokens.textFontWeight}: ${textS.fontWeight}; + ${tokens.textLetterSpacing}: ${textS.letterSpacing}; + ${tokens.textLineHeight}: ${textS.lineHeight}; `, xs: css` ${tokens.padding}: 0.75rem 1rem; @@ -146,8 +168,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1rem; ${tokens.closeIconButtonSize}: 1rem; @@ -155,20 +177,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.titleFontFamily}: ${textXS.fontFamily}; + ${tokens.titleFontSize}: ${textXS.fontSize}; + ${tokens.titleFontStyle}: ${textXS.fontStyle}; + ${tokens.titleFontWeight}: ${textXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.titleLineHeight}: ${textXS.lineHeight}; ${tokens.titlePaddingRight}: 1.5rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.textFontFamily}: ${textXS.fontFamily}; + ${tokens.textFontSize}: ${textXS.fontSize}; + ${tokens.textFontStyle}: ${textXS.fontStyle}; + ${tokens.textFontWeight}: ${textXS.fontWeight}; + ${tokens.textLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.textLineHeight}: ${textXS.lineHeight}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Notification/Notification.config.ts b/packages/sdds-dfa/src/components/Notification/Notification.config.ts index 3963e77e1e2..57d66149ec2 100644 --- a/packages/sdds-dfa/src/components/Notification/Notification.config.ts +++ b/packages/sdds-dfa/src/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +20,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +52,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +106,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +160,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +214,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +268,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/sdds-dfa/src/components/NumberInput/NumberInput.config.ts b/packages/sdds-dfa/src/components/NumberInput/NumberInput.config.ts index e55e70fd713..fc1b273ef2c 100644 --- a/packages/sdds-dfa/src/components/NumberInput/NumberInput.config.ts +++ b/packages/sdds-dfa/src/components/NumberInput/NumberInput.config.ts @@ -1,3 +1,40 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseSurfaceTransparentSecondary, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextTertiary, + onDarkSurfaceTransparentSecondary, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextTertiary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,26 +47,26 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-solid-default); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${inverseSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceSolidDefault}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -37,26 +74,26 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, secondary: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.iconButtonColorSolidActive}: var(--text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -64,27 +101,27 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, accent: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--inverse-text-primary); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--on-dark-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--on-dark-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-accent); - - ${tokens.iconButtonColor}: var(--on-dark-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-accent); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${inverseTextPrimary}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${onDarkTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${onDarkTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${onDarkSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceAccent}; + + ${tokens.iconButtonColor}: ${onDarkTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${onDarkTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${onDarkTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -92,25 +129,25 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, clear: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; ${tokens.backgroundColorSolid}: transparent; - ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonColor}: ${textPrimary}; ${tokens.iconButtonBackgroundColor}: transparent; - ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; ${tokens.iconButtonBackgroundColorHover}: transparent; - ${tokens.iconButtonColorActive}: var(--text-primary-active); + ${tokens.iconButtonColorActive}: ${textPrimaryActive}; ${tokens.iconButtonBackgroundColorActive}: transparent; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -125,12 +162,12 @@ export const config = { ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${tokens.iconButtonRadius}: 0.875rem; ${tokens.iconButtonSegmentationRadius}: 0.375rem; @@ -140,12 +177,12 @@ export const config = { ${tokens.textWrapperHeight}: 3.5rem; ${tokens.textWrapperPadding}: 1.063rem 1.125rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -157,12 +194,12 @@ export const config = { ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -172,12 +209,12 @@ export const config = { ${tokens.textWrapperHeight}: 3rem; ${tokens.textWrapperPadding}: 0.875rem 1rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -189,12 +226,12 @@ export const config = { ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 1rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.625rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -204,12 +241,12 @@ export const config = { ${tokens.textWrapperHeight}: 2.5rem; ${tokens.textWrapperPadding}: 0.688rem 0.875rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -221,12 +258,12 @@ export const config = { ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.75rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${tokens.iconButtonRadius}: 0.5rem; ${tokens.iconButtonSegmentationRadius}: 0.125rem; @@ -236,12 +273,12 @@ export const config = { ${tokens.textWrapperHeight}: 2rem; ${tokens.textWrapperPadding}: 0.563rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -257,8 +294,8 @@ export const config = { }, inputBackgroundType: { fill: css` - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimary}; `, clear: css` ${tokens.backgroundColor}: transparent; diff --git a/packages/sdds-dfa/src/components/Pagination/Pagination.config.ts b/packages/sdds-dfa/src/components/Pagination/Pagination.config.ts index 5b9af725836..22c3dc57bd7 100644 --- a/packages/sdds-dfa/src/components/Pagination/Pagination.config.ts +++ b/packages/sdds-dfa/src/components/Pagination/Pagination.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,129 +39,129 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; ${paginationTokens.inputBorderColor}:transparent; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, }, size: { l: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-l-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-l-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-l-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-l-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyL.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyL.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyL.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyLBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyL.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyL.lineHeight}; ${paginationTokens.buttonHeight}: 3.5rem; ${paginationTokens.buttonWidth}: 3rem; @@ -167,12 +197,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, m: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; @@ -208,12 +238,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; @@ -249,12 +279,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, xs: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-xs-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-xs-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-xs-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyXS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyXS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyXS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyXSBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyXS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyXS.lineHeight}; ${paginationTokens.buttonHeight}: 2rem; ${paginationTokens.paginationInputWidth}: 2.5rem; diff --git a/packages/sdds-dfa/src/components/Popover/Popover.config.ts b/packages/sdds-dfa/src/components/Popover/Popover.config.ts index 2f9acaf14e8..5326d1aeac7 100644 --- a/packages/sdds-dfa/src/components/Popover/Popover.config.ts +++ b/packages/sdds-dfa/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Progress/Progress.config.ts b/packages/sdds-dfa/src/components/Progress/Progress.config.ts index c81cf38a298..1df05075ead 100644 --- a/packages/sdds-dfa/src/components/Progress/Progress.config.ts +++ b/packages/sdds-dfa/src/components/Progress/Progress.config.ts @@ -1,3 +1,15 @@ +import { + surfaceAccent, + surfaceAccentGradient, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,44 +20,44 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, primary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, info: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-info); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceInfo}; + ${progressTokens.valueColor}: ${textTertiary}; `, success: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, error: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/sdds-dfa/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/sdds-dfa/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index 6a6449f99a4..28821d29963 100644 --- a/packages/sdds-dfa/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/sdds-dfa/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +70,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -63,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -76,12 +96,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -89,12 +109,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -102,12 +122,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -115,12 +135,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -128,12 +148,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Radiobox/Radiobox.config.ts b/packages/sdds-dfa/src/components/Radiobox/Radiobox.config.ts index d5fc23d48b3..9d3b3fd9b65 100644 --- a/packages/sdds-dfa/src/components/Radiobox/Radiobox.config.ts +++ b/packages/sdds-dfa/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,18 +37,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,18 +60,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${radioboxTokens.margin}: 0; @@ -66,19 +82,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.625rem; ${radioboxTokens.contentTopOffset}: 0.0625rem; ${radioboxTokens.contentLeftOffset}: 0.75rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyL.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -86,74 +102,74 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${radioboxTokens.fillColor}: var(--text-primary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPrimary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${radioboxTokens.fillColor}: var(--text-secondary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textSecondary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${radioboxTokens.fillColor}: var(--text-tertiary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textTertiary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${radioboxTokens.fillColor}: var(--text-paragraph); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textParagraph}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${radioboxTokens.fillColor}: var(--text-positive); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPositive}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${radioboxTokens.fillColor}: var(--text-warning); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textWarning}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated negative: css` - ${radioboxTokens.fillColor}: var(--text-negative); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textNegative}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -164,7 +180,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Range/Range.clear.config.ts b/packages/sdds-dfa/src/components/Range/Range.clear.config.ts index 53faca3d526..97903e76e40 100644 --- a/packages/sdds-dfa/src/components/Range/Range.clear.config.ts +++ b/packages/sdds-dfa/src/components/Range/Range.clear.config.ts @@ -1,3 +1,31 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -14,57 +42,57 @@ export const config = { ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); - - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldBackgroundColorHover}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -75,15 +103,15 @@ export const config = { ${tokens.textFieldBackgroundSuccessColorHover}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; `, }, size: { @@ -91,12 +119,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.5rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -104,24 +132,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -139,22 +167,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -168,12 +196,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -181,24 +209,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -216,22 +244,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -245,12 +273,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -258,24 +286,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -293,22 +321,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -322,12 +350,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -335,24 +363,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -370,22 +398,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -399,12 +427,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -412,24 +440,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -447,22 +475,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -475,10 +503,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -491,12 +519,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -515,12 +543,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -538,16 +566,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Range/Range.config.ts b/packages/sdds-dfa/src/components/Range/Range.config.ts index af1793bb835..57c29e4f8f8 100644 --- a/packages/sdds-dfa/src/components/Range/Range.config.ts +++ b/packages/sdds-dfa/src/components/Range/Range.config.ts @@ -1,3 +1,32 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,55 +39,55 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorHover}: var(--surface-transparent-negative-hover); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorHover}: var(--surface-transparent-positive-hover); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -66,12 +95,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -79,24 +108,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 4rem; @@ -114,22 +143,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -142,12 +171,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -155,24 +184,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -190,22 +219,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -218,12 +247,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -231,24 +260,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -266,22 +295,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -294,12 +323,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -307,24 +336,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -342,22 +371,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -370,12 +399,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -383,24 +412,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -418,22 +447,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -445,10 +474,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -461,12 +490,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -485,12 +514,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -508,16 +537,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Rating/Rating.config.ts b/packages/sdds-dfa/src/components/Rating/Rating.config.ts index 79e9f36f886..8a1ffa06164 100644 --- a/packages/sdds-dfa/src/components/Rating/Rating.config.ts +++ b/packages/sdds-dfa/src/components/Rating/Rating.config.ts @@ -1,3 +1,36 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + bodyXXS, + bodyXXSBold, + dsplL, + dsplLBold, + dsplM, + dsplMBold, + dsplS, + dsplSBold, + h1, + h1Bold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +41,36 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; // TODO: change with token data-yellow, when it will be added to theme ${tokens.iconColor}: #F3A912; - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { l: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -48,19 +81,19 @@ export const config = { m: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -71,19 +104,19 @@ export const config = { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -94,19 +127,19 @@ export const config = { xs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.iconMarginBottom}: 0.125rem; ${tokens.contentGap}: 0.375rem; @@ -121,19 +154,19 @@ export const config = { xxs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.fontFamily}: ${bodyXXS.fontFamily}; + ${tokens.fontSize}: ${bodyXXS.fontSize}; + ${tokens.fontStyle}: ${bodyXXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.contentGap}: 0.375rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -146,19 +179,19 @@ export const config = { h1: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tokens.fontFamily}: ${h1.fontFamily}; + ${tokens.fontSize}: ${h1.fontSize}; + ${tokens.fontStyle}: ${h1.fontStyle}; + ${tokens.fontWeight}: ${h1Bold.fontWeight}; + ${tokens.letterSpacing}: ${h1.letterSpacing}; + ${tokens.lineHeight}: ${h1.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.helperTextFontFamily}: ${bodyM.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyM.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyM.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyM.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyM.lineHeight}; ${tokens.contentGap}: 1rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -177,19 +210,19 @@ export const config = { h2: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tokens.fontFamily}: ${h2.fontFamily}; + ${tokens.fontSize}: ${h2.fontSize}; + ${tokens.fontStyle}: ${h2.fontStyle}; + ${tokens.fontWeight}: ${h2Bold.fontWeight}; + ${tokens.letterSpacing}: ${h2.letterSpacing}; + ${tokens.lineHeight}: ${h2.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.875rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -208,19 +241,19 @@ export const config = { h3: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.fontFamily}: ${h3.fontFamily}; + ${tokens.fontSize}: ${h3.fontSize}; + ${tokens.fontStyle}: ${h3.fontStyle}; + ${tokens.fontWeight}: ${h3Bold.fontWeight}; + ${tokens.letterSpacing}: ${h3.letterSpacing}; + ${tokens.lineHeight}: ${h3.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.75rem; ${tokens.singleIconContentGap}: 0.375rem; @@ -239,19 +272,19 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.fontFamily}: ${h4.fontFamily}; + ${tokens.fontSize}: ${h4.fontSize}; + ${tokens.fontStyle}: ${h4.fontStyle}; + ${tokens.fontWeight}: ${h4Bold.fontWeight}; + ${tokens.letterSpacing}: ${h4.letterSpacing}; + ${tokens.lineHeight}: ${h4.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -270,19 +303,19 @@ export const config = { h5: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.fontFamily}: ${h5.fontFamily}; + ${tokens.fontSize}: ${h5.fontSize}; + ${tokens.fontStyle}: ${h5.fontStyle}; + ${tokens.fontWeight}: ${h5Bold.fontWeight}; + ${tokens.letterSpacing}: ${h5.letterSpacing}; + ${tokens.lineHeight}: ${h5.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -301,19 +334,19 @@ export const config = { h6: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tokens.fontFamily}: ${h6.fontFamily}; + ${tokens.fontSize}: ${h6.fontSize}; + ${tokens.fontStyle}: ${h6.fontStyle}; + ${tokens.fontWeight}: ${h6Bold.fontWeight}; + ${tokens.letterSpacing}: ${h6.letterSpacing}; + ${tokens.lineHeight}: ${h6.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -332,19 +365,19 @@ export const config = { displayL: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${tokens.fontFamily}: ${dsplL.fontFamily}; + ${tokens.fontSize}: ${dsplL.fontSize}; + ${tokens.fontStyle}: ${dsplL.fontStyle}; + ${tokens.fontWeight}: ${dsplLBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplL.letterSpacing}; + ${tokens.lineHeight}: ${dsplL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.helperTextFontFamily}: ${h3.fontFamily}; + ${tokens.helperTextFontSize}: ${h3.fontSize}; + ${tokens.helperTextFontStyle}: ${h3.fontStyle}; + ${tokens.helperTextFontWeight}: ${h3.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing}; + ${tokens.helperTextLineHeight}: ${h3.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -363,19 +396,19 @@ export const config = { displayM: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${tokens.fontFamily}: ${dsplM.fontFamily}; + ${tokens.fontSize}: ${dsplM.fontSize}; + ${tokens.fontStyle}: ${dsplM.fontStyle}; + ${tokens.fontWeight}: ${dsplMBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplM.letterSpacing}; + ${tokens.lineHeight}: ${dsplM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -394,19 +427,19 @@ export const config = { displayS: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${dsplS.fontFamily}; + ${tokens.fontSize}: ${dsplS.fontSize}; + ${tokens.fontStyle}: ${dsplS.fontStyle}; + ${tokens.fontWeight}: ${dsplSBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplS.letterSpacing}; + ${tokens.lineHeight}: ${dsplS.lineHeight}; + + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; diff --git a/packages/sdds-dfa/src/components/Segment/SegmentGroup.config.ts b/packages/sdds-dfa/src/components/Segment/SegmentGroup.config.ts index 5e61dd6da39..526009c9ad2 100644 --- a/packages/sdds-dfa/src/components/Segment/SegmentGroup.config.ts +++ b/packages/sdds-dfa/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +9,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, }, size: { @@ -74,7 +75,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary}; `, }, orientation: { diff --git a/packages/sdds-dfa/src/components/Segment/SegmentItem.config.ts b/packages/sdds-dfa/src/components/Segment/SegmentItem.config.ts index 424dbd9d14f..e866fdb0d71 100644 --- a/packages/sdds-dfa/src/components/Segment/SegmentItem.config.ts +++ b/packages/sdds-dfa/src/components/Segment/SegmentItem.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,68 +32,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.outlineFocusColor}: var(--text-accent); + ${segmentTokens.outlineFocusColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -83,12 +107,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${segmentTokens.itemBorderRadius}: 0.625rem; @@ -100,12 +124,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -117,12 +141,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, l: css` ${segmentTokens.itemBorderRadius}: 0.875rem; @@ -134,12 +158,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, xl: css` ${segmentTokens.itemBorderRadius}: 1rem; @@ -151,12 +175,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-dfa/src/components/Select/Select.config.ts b/packages/sdds-dfa/src/components/Select/Select.config.ts index 8522cb0d6c0..a6ef3ad75aa 100644 --- a/packages/sdds-dfa/src/components/Select/Select.config.ts +++ b/packages/sdds-dfa/src/components/Select/Select.config.ts @@ -1,3 +1,75 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + onLightTextSecondaryActive, + onLightTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,348 +82,348 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, accent: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-accent); - ${tokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-accent-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceAccent}; + ${tokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, secondary: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, clear: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-active); - ${tokens.buttonBackgroundColor}: var(--surface-clear); - ${tokens.buttonBackgroundColorHover}: var(--surface-clear); - ${tokens.buttonBackgroundColorActive}: var(--surface-clear); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryActive}; + ${tokens.buttonBackgroundColor}: ${surfaceClear}; + ${tokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${tokens.buttonBackgroundColorActive}: ${surfaceClear}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, dark: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-transparent-deep); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceTransparentDeep}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceTransparentDeepHover}; + ${tokens.buttonBackgroundColorActive}:${onLightSurfaceTransparentDeepActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, black: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, white: css` - ${tokens.buttonColor}: var(--on-light-text-primary); - ${tokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-light-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-light-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-light-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-light-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-dark-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); - - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); + ${tokens.buttonColor}: ${onLightTextPrimary}; + ${tokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onLightTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onLightTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onLightTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onLightTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onDarkSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onDarkSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}:${onDarkSurfaceSolidDefaultActive}; + + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -371,20 +443,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -392,12 +464,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -420,12 +492,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; ${tokens.targetHeight}: 3.5rem; @@ -451,19 +523,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -496,20 +568,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -517,12 +589,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -545,12 +617,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -576,19 +648,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -621,20 +693,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -642,12 +714,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -670,12 +742,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; @@ -701,19 +773,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -746,20 +818,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -767,12 +839,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -795,12 +867,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2rem; @@ -826,19 +898,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -858,69 +930,69 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--on-dark-text-primary); - ${tokens.textFieldChipColorHover}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${onDarkTextPrimary}; + ${tokens.textFieldChipColorHover}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -933,12 +1005,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -957,12 +1029,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -982,12 +1054,12 @@ export const config = { true: css` ${tokens.disclosureIconOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-dfa/src/components/Skeleton/LineSkeleton.config.ts index 75d2ee7a606..f9a805f882c 100644 --- a/packages/sdds-dfa/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-dfa/src/components/Skeleton/LineSkeleton.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + dsplL, + dsplM, + dsplS, + h1, + h2, + h3, + h4, + h5, + h6, + surfaceSkeletonDeepGradient, + surfaceSkeletonGradient, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textL, + textM, + textS, + textXS, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, skeletonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,88 +32,88 @@ export const config = { variations: { view: { default: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient, var(--surface-skeleton-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, lighter: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient-lighter, var(--surface-skeleton-deep-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonDeepGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, }, size: { bodyL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size); + ${skeletonTokens.lineHeight}: ${bodyL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyL.fontSize}; `, bodyM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size); + ${skeletonTokens.lineHeight}: ${bodyM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyM.fontSize}; `, bodyS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size); + ${skeletonTokens.lineHeight}: ${bodyS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyS.fontSize}; `, bodyXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXS.fontSize}; `, bodyXXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXXS.fontSize}; `, dsplL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size); + ${skeletonTokens.lineHeight}: ${dsplL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplL.fontSize}; `, dsplM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size); + ${skeletonTokens.lineHeight}: ${dsplM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplM.fontSize}; `, dsplS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size); + ${skeletonTokens.lineHeight}: ${dsplS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplS.fontSize}; `, h1: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size); + ${skeletonTokens.lineHeight}: ${h1.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h1.fontSize}; `, h2: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size); + ${skeletonTokens.lineHeight}: ${h2.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h2.fontSize}; `, h3: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size); + ${skeletonTokens.lineHeight}: ${h3.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h3.fontSize}; `, h4: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size); + ${skeletonTokens.lineHeight}: ${h4.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h4.fontSize}; `, h5: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); + ${skeletonTokens.lineHeight}: ${h5.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h5.fontSize}; `, h6: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + ${skeletonTokens.lineHeight}: ${h6.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h6.fontSize}; `, textL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); + ${skeletonTokens.lineHeight}: ${textL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textL.fontSize}; `, textM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size); + ${skeletonTokens.lineHeight}: ${textM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textM.fontSize}; `, textS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size); + ${skeletonTokens.lineHeight}: ${textS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textS.fontSize}; `, textXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size); + ${skeletonTokens.lineHeight}: ${textXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textXS.fontSize}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Slider/Slider.config.ts b/packages/sdds-dfa/src/components/Slider/Slider.config.ts index c171f134490..9c148c9bf3c 100644 --- a/packages/sdds-dfa/src/components/Slider/Slider.config.ts +++ b/packages/sdds-dfa/src/components/Slider/Slider.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + surfaceAccent, + surfaceAccentGradient, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +25,70 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, gradient: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent-gradient); + ${sliderTokens.fillColor}: ${surfaceAccentGradient}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, }, size: { @@ -85,24 +102,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -119,12 +136,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -136,24 +153,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -170,12 +187,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -187,24 +204,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -221,12 +238,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-dfa/src/components/Steps/Steps.config.ts b/packages/sdds-dfa/src/components/Steps/Steps.config.ts index 60ec0627ef4..856fc78cae3 100644 --- a/packages/sdds-dfa/src/components/Steps/Steps.config.ts +++ b/packages/sdds-dfa/src/components/Steps/Steps.config.ts @@ -1,42 +1,72 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -47,10 +77,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -60,26 +90,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -100,33 +130,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.5rem; ${tokens.largeBulletIndentHeight}: 1.25rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyL.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyM.fontFamily}; + ${tokens.contentFontSize}: ${bodyM.fontSize}; + ${tokens.contentFontStyle}: ${bodyM.fontStyle}; + ${tokens.contentFontWeight}: ${bodyM.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyM.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -147,33 +177,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -194,33 +224,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -241,33 +271,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 0.75rem; ${tokens.largeBulletIndentHeight}: 0.5rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -278,8 +308,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/sdds-dfa/src/components/Switch/Switch.config.ts b/packages/sdds-dfa/src/components/Switch/Switch.config.ts index 8a08bd686d8..8a75087b79a 100644 --- a/packages/sdds-dfa/src/components/Switch/Switch.config.ts +++ b/packages/sdds-dfa/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,50 +24,50 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -83,17 +96,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -104,7 +117,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Table/Table.config.ts b/packages/sdds-dfa/src/components/Table/Table.config.ts index 770fa22b6d8..0a0adfcde6d 100644 --- a/packages/sdds-dfa/src/components/Table/Table.config.ts +++ b/packages/sdds-dfa/src/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + surfaceTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +28,12 @@ export const config = { }, size: { l: css` - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.headerRowHeight}: 3.125rem; ${tokens.rowHeight}: 3.125rem; @@ -31,9 +43,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.5rem; ${tokens.editableCellIconButtonWidth}: 3rem; @@ -42,18 +54,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.875rem; ${tokens.editableCellInputPadding}: 0 0.75rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.75rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.875rem; @@ -63,12 +75,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -76,20 +88,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.5rem 0.875rem; ${tokens.selectControlPanelGap}: 0.5rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight}; `, m: css` - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.headerRowHeight}: 2.75rem; ${tokens.rowHeight}: 2.75rem; @@ -99,9 +111,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.375rem; ${tokens.editableCellIconButtonWidth}: 2.5rem; @@ -110,18 +122,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.625rem; ${tokens.editableCellInputPadding}: 0 0.625rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.75rem; @@ -131,12 +143,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -144,20 +156,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.75rem; ${tokens.selectControlPanelGap}: 0.625rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, s: css` - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.headerRowHeight}: 2.125rem; ${tokens.rowHeight}: 2.125rem; @@ -167,9 +179,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.25rem; ${tokens.editableCellIconButtonWidth}: 2rem; @@ -178,18 +190,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.5rem; ${tokens.editableCellInputPadding}: 0 0.375rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.25rem 0.5rem; ${tokens.buttonHeight}: 1.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.625rem; @@ -199,12 +211,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.25rem 0 0; ${tokens.selectItemIconSize}: 1rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 0.875rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -212,12 +224,12 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.5rem; ${tokens.selectControlPanelGap}: 0.25rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 8b2e20b8ce7..1cabd982575 100644 --- a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,13 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,78 +18,78 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; diff --git a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index f70368f502f..60469422dc9 100644 --- a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h1, + h2, + h3, + h4, + h5, + h6, + inverseTextPrimary, + inverseTextSecondary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,106 +34,106 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -123,12 +149,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -142,12 +168,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -161,12 +187,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -180,12 +206,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -197,12 +223,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tabsTokens.fontFamily}: ${h6.fontFamily}; + ${tabsTokens.fontSize}: ${h6.fontSize}; + ${tabsTokens.fontStyle}: ${h6.fontStyle}; + ${tabsTokens.fontWeight}: ${h6.fontWeight}; + ${tabsTokens.letterSpacing}: ${h6.letterSpacing}; + ${tabsTokens.lineHeight}: ${h6.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -214,12 +240,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -231,12 +257,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -248,12 +274,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -265,12 +291,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -282,12 +308,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabs.config.ts index bc9eef78042..d0e70b248da 100644 --- a/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,10 @@ +import { + outlineSolidPrimary, + surfaceAccent, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,25 +15,25 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--outline-solid-primary); + ${tabsTokens.tabsDividerColor}: ${outlineSolidPrimary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-dfa/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/sdds-dfa/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index c1b4b62e4a1..fdd57a1049c 100644 --- a/packages/sdds-dfa/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/sdds-dfa/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-dfa/src/components/Tabs/vertical/VerticalTabItem.config.ts index c819eeeacbd..e83459e682b 100644 --- a/packages/sdds-dfa/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +24,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +65,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -69,12 +85,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -89,12 +105,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -109,12 +125,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/sdds-dfa/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/sdds-dfa/src/components/Tabs/vertical/VerticalTabs.config.ts index 78eba3f047c..abec1b5eea2 100644 --- a/packages/sdds-dfa/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/sdds-dfa/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-dfa/src/components/TextArea/TextArea.clear.config.ts b/packages/sdds-dfa/src/components/TextArea/TextArea.clear.config.ts index 87abb38a0d7..92675ddc1ff 100644 --- a/packages/sdds-dfa/src/components/TextArea/TextArea.clear.config.ts +++ b/packages/sdds-dfa/src/components/TextArea/TextArea.clear.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -19,31 +42,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` ${tokens.inputBackgroundColor}: transparent; @@ -56,31 +79,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-positive); - ${tokens.inputColorFocus}: var(--text-positive); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPositive}; + ${tokens.inputColorFocus}: ${textPositive}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` ${tokens.inputBackgroundColor}: transparent; @@ -93,31 +116,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-warning); - ${tokens.inputColorFocus}: var(--text-warning); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textWarning}; + ${tokens.inputColorFocus}: ${textWarning}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` ${tokens.inputBackgroundColor}: transparent; @@ -130,31 +153,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-negative); - ${tokens.inputColorFocus}: var(--text-negative); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textNegative}; + ${tokens.inputColorFocus}: ${textNegative}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -184,30 +207,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -225,12 +248,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -258,30 +281,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -299,12 +322,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -332,30 +355,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -373,12 +396,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -406,30 +429,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -447,12 +470,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -480,30 +503,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -521,24 +544,24 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; ${tokens.tooltipBoxShadow}: var( --shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08) ); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -551,12 +574,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -575,12 +598,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -598,9 +621,9 @@ export const config = { }, readOnly: { true: css` - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-dfa/src/components/TextArea/TextArea.config.ts b/packages/sdds-dfa/src/components/TextArea/TextArea.config.ts index 9a056369045..ac4eb0b7bca 100644 --- a/packages/sdds-dfa/src/components/TextArea/TextArea.config.ts +++ b/packages/sdds-dfa/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,41 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,172 +46,172 @@ export const config = { variations: { view: { default: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-primary); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-primary); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-positive); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-positive); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-positive); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textPositive}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-warning); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-warning); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-warning); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textWarning}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-negative); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-negative); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -202,30 +240,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -243,12 +281,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.751rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -275,30 +313,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -316,12 +354,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -348,30 +386,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -391,12 +429,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -423,30 +461,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.5rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +502,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -496,30 +534,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.375rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -537,20 +575,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -563,12 +601,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -587,12 +625,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -606,18 +644,18 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-dfa/src/components/TextField/TextField.clear.config.ts b/packages/sdds-dfa/src/components/TextField/TextField.clear.config.ts index 31d1a8122e8..67f26f0e4a5 100644 --- a/packages/sdds-dfa/src/components/TextField/TextField.clear.config.ts +++ b/packages/sdds-dfa/src/components/TextField/TextField.clear.config.ts @@ -1,3 +1,52 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,132 +58,132 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-positive); + ${tokens.color}: ${textPositive}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-positive); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textPositive}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-positive); - ${tokens.contentSlotColorHover}: var(--text-positive-hover); - ${tokens.contentSlotColorActive}: var(--text-positive-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPositive}; + ${tokens.contentSlotColorHover}: ${textPositiveHover}; + ${tokens.contentSlotColorActive}: ${textPositiveActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-warning); + ${tokens.color}: ${textWarning}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-warning); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textWarning}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-warning); - ${tokens.contentSlotColorHover}: var(--text-warning-hover); - ${tokens.contentSlotColorActive}: var(--text-warning-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textWarning}; + ${tokens.contentSlotColorHover}: ${textWarningHover}; + ${tokens.contentSlotColorActive}: ${textWarningActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-negative); + ${tokens.color}: ${textNegative}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-negative); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textNegative}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -151,40 +200,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -200,19 +249,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -235,40 +284,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -283,12 +332,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -311,40 +360,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -359,12 +408,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -387,40 +436,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -435,12 +484,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -463,40 +512,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -511,12 +560,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -529,126 +578,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -661,12 +710,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -685,12 +734,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -709,13 +758,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); + ${tokens.colorReadOnly}: ${textPrimary}; ${tokens.backgroundColorReadOnly}: transparent; - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-dfa/src/components/TextField/TextField.config.ts b/packages/sdds-dfa/src/components/TextField/TextField.config.ts index c029fa0c4a6..e2d51599e30 100644 --- a/packages/sdds-dfa/src/components/TextField/TextField.config.ts +++ b/packages/sdds-dfa/src/components/TextField/TextField.config.ts @@ -1,3 +1,56 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,120 +62,120 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-positive); - ${tokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPositive}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-warning); - ${tokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentWarning}; + ${tokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -135,40 +188,40 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -184,19 +237,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -219,20 +272,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -240,20 +293,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -266,12 +319,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -297,20 +350,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -318,20 +371,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -344,12 +397,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -375,20 +428,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -396,20 +449,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -422,12 +475,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -453,20 +506,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -474,20 +527,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -500,12 +553,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -520,126 +573,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -652,12 +705,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -676,12 +729,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -700,13 +753,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-dfa/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/sdds-dfa/src/components/TextFieldGroup/TextFieldGroup.config.ts index 200d2e26ac4..849ffbca5e1 100644 --- a/packages/sdds-dfa/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/sdds-dfa/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.textFieldDefaultRadius}: 0.75rem; @@ -77,28 +78,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -111,12 +112,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -133,28 +134,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -167,12 +168,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.textFieldSegmentedRadius}: 0.125rem; @@ -189,28 +190,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -223,12 +224,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-dfa/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts b/packages/sdds-dfa/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts index a33164279df..889f277b1ac 100644 --- a/packages/sdds-dfa/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts +++ b/packages/sdds-dfa/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + textAccent, + textNegative, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,10 +35,10 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -25,45 +51,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -76,45 +102,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-positive); - ${tokens.textFieldContentSlotColorHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColor}: ${textPositive}; + ${tokens.textFieldContentSlotColorHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorActive}: ${textPositiveActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-positive); + ${tokens.scaleValueColor}: ${textPositive}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -127,45 +153,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -178,50 +204,50 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-negative); + ${tokens.scaleValueColor}: ${textNegative}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -235,38 +261,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -288,12 +314,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -305,38 +331,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -358,12 +384,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -375,38 +401,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -428,12 +454,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -445,38 +471,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -498,12 +524,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -515,38 +541,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -568,20 +594,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -594,12 +620,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -618,12 +644,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -641,12 +667,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-dfa/src/components/TextFieldSlider/TextFieldSlider.config.ts b/packages/sdds-dfa/src/components/TextFieldSlider/TextFieldSlider.config.ts index c63635d3490..77141fbfbc7 100644 --- a/packages/sdds-dfa/src/components/TextFieldSlider/TextFieldSlider.config.ts +++ b/packages/sdds-dfa/src/components/TextFieldSlider/TextFieldSlider.config.ts @@ -1,3 +1,35 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,207 +41,207 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; - ${tokens.textFieldBorderColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldBorderColorHover}: var(--text-secondary); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldBorderColorHover}: ${textSecondary}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-positive-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-warning-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -223,38 +255,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -276,12 +308,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -293,38 +325,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -346,12 +378,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -363,38 +395,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -416,12 +448,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -433,38 +465,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -486,12 +518,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -503,38 +535,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -556,20 +588,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -582,12 +614,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -606,12 +638,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -629,12 +661,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-dfa/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-dfa/src/components/TimePicker/TimePicker.config.ts index b86cc9da0bd..5a4275a123c 100644 --- a/packages/sdds-dfa/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-dfa/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,45 +33,45 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; - ${tokens.labelColor}: var(--text-primary); + ${tokens.labelColor}: ${textPrimary}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); + ${tokens.timePickerShadow}: ${shadowDownSoftS}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -63,12 +86,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -80,12 +103,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -103,34 +126,34 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.5rem; @@ -146,12 +169,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -163,12 +186,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -186,34 +209,34 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -229,12 +252,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -246,12 +269,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -269,34 +292,34 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.813rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -312,12 +335,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -329,12 +352,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -352,34 +375,34 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -450,13 +473,13 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Toast/Toast.config.ts b/packages/sdds-dfa/src/components/Toast/Toast.config.ts index 9678f1dd594..fbfe15509e4 100644 --- a/packages/sdds-dfa/src/components/Toast/Toast.config.ts +++ b/packages/sdds-dfa/src/components/Toast/Toast.config.ts @@ -1,3 +1,17 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,49 +23,49 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-positive); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textPositive}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-negative); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textNegative}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary); + ${toastTokens.closeIconColor}: ${onDarkTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary); + ${toastTokens.closeIconColor}: ${onLightTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextSecondary}; `, }, size: { @@ -59,12 +73,12 @@ export const config = { ${toastTokens.borderRadius}: 0.75rem; ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/sdds-dfa/src/components/Toolbar/Toolbar.config.ts b/packages/sdds-dfa/src/components/Toolbar/Toolbar.config.ts index 89581b0d6bf..80b164b688c 100644 --- a/packages/sdds-dfa/src/components/Toolbar/Toolbar.config.ts +++ b/packages/sdds-dfa/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/sdds-dfa/src/components/Tooltip/Tooltip.config.ts b/packages/sdds-dfa/src/components/Tooltip/Tooltip.config.ts index 2ca59cef4c5..cfd09e4eca7 100644 --- a/packages/sdds-dfa/src/components/Tooltip/Tooltip.config.ts +++ b/packages/sdds-dfa/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,4 @@ +import { bodyS, bodyXS, surfaceSolidCardBrightness, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +17,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -30,7 +31,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -41,12 +42,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -55,15 +56,15 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.color}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Tree/Tree.config.ts b/packages/sdds-dfa/src/components/Tree/Tree.config.ts index e8cbfce73a6..483b90ebb10 100644 --- a/packages/sdds-dfa/src/components/Tree/Tree.config.ts +++ b/packages/sdds-dfa/src/components/Tree/Tree.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,24 +24,24 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -53,12 +69,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.itemHeight}: 3.5rem; @@ -84,12 +100,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.itemHeight}: 3rem; @@ -115,12 +131,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -146,12 +162,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.itemHeight}: 2rem; @@ -177,12 +193,12 @@ export const config = { ${tokens.checkboxInnerSize}: 0.875rem; ${tokens.checkboxBorderRadius}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Typography/Body.config.ts b/packages/sdds-dfa/src/components/Typography/Body.config.ts index 23927fdf18c..f5b62dc861a 100644 --- a/packages/sdds-dfa/src/components/Typography/Body.config.ts +++ b/packages/sdds-dfa/src/components/Typography/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Typography/Dspl.config.ts b/packages/sdds-dfa/src/components/Typography/Dspl.config.ts index 3fb1245a027..36cff59618f 100644 --- a/packages/sdds-dfa/src/components/Typography/Dspl.config.ts +++ b/packages/sdds-dfa/src/components/Typography/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +18,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +38,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +58,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Typography/Heading.config.ts b/packages/sdds-dfa/src/components/Typography/Heading.config.ts index 77f16729129..a0c18f30237 100644 --- a/packages/sdds-dfa/src/components/Typography/Heading.config.ts +++ b/packages/sdds-dfa/src/components/Typography/Heading.config.ts @@ -1,3 +1,23 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, + h6, + h6Bold, + h6Medium, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configH1 = { @@ -7,14 +27,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +46,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +65,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +84,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +103,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, @@ -102,14 +122,14 @@ export const configH6 = { variations: { size: { h6: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + ${typographyTokens.typoFontFamily}: ${h6.fontFamily}; + ${typographyTokens.typoFontSize}: ${h6.fontSize}; + ${typographyTokens.typoFontStyle}: ${h6.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h6.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h6Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h6Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h6.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h6.lineHeight}; `, }, }, diff --git a/packages/sdds-dfa/src/components/Typography/Text.config.ts b/packages/sdds-dfa/src/components/Typography/Text.config.ts index 542bc09a87d..91920748de7 100644 --- a/packages/sdds-dfa/src/components/Typography/Text.config.ts +++ b/packages/sdds-dfa/src/components/Typography/Text.config.ts @@ -1,3 +1,17 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_dfa'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +21,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +41,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +61,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +81,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, From d05f3b026c81f9a48f9aa390220520078d34b044 Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 19:23:33 +0300 Subject: [PATCH 14/24] chore(sdds-finai): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 285 +++-- .../src/components/Attach/Attach.config.ts | 899 +++++++------- .../Autocomplete/Autocomplete.config.ts | 666 ++++++---- .../src/components/Badge/Badge.config.ts | 148 ++- .../Breadcrumbs/Breadcrumbs.config.ts | 68 +- .../src/components/Button/Button.config.ts | 258 ++-- .../ButtonGroup/ButtonGroup.config.ts | 300 +++-- .../components/Calendar/Calendar.config.ts | 460 +++---- .../Calendar/CalendarDouble.config.ts | 460 +++---- .../src/components/Card/Card.config.ts | 3 +- .../components/Carousel/Carousel.config.ts | 24 +- .../src/components/Cell/Cell.config.ts | 169 +-- .../components/Checkbox/Checkbox.config.ts | 156 +-- .../Chip/Chip.transparent.config.ts | 217 ++-- .../components/ChipGroup/ChipGroup.config.ts | 102 +- .../components/CodeField/CodeField.config.ts | 85 +- .../components/Combobox/Combobox.config.ts | 805 ++++++------ .../src/components/Counter/Counter.config.ts | 103 +- .../DatePicker/DatePicker.config.ts | 828 +++++++------ .../DateTimePicker/DateTimePicker.config.ts | 567 +++++---- .../src/components/Divider/Divider.config.ts | 14 +- .../src/components/Drawer/Drawer.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 160 ++- .../components/Dropzone/Dropzone.config.ts | 53 +- .../EmbedIconButton/EmbedIconButton.config.ts | 125 +- .../EmptyState/EmptyState.config.ts | 49 +- .../IconButton/IconButton.config.ts | 194 +-- .../InformationWrapper.config.ts | 197 +-- .../LinkButton/LinkButton.config.ts | 158 ++- .../src/components/List/List.config.ts | 77 +- .../src/components/Modal/Modal.config.ts | 20 +- .../src/components/Note/Note.config.ts | 164 +-- .../Notification/Notification.config.ts | 196 +-- .../NumberInput/NumberInput.config.ts | 289 +++-- .../Pagination/Pagination.config.ts | 280 +++-- .../src/components/Popover/Popover.config.ts | 5 +- .../ProgressBarCircular.config.ts | 146 ++- .../components/Radiobox/Radiobox.config.ts | 154 +-- .../src/components/Range/Range.config.ts | 508 ++++---- .../components/Segment/SegmentGroup.config.ts | 11 +- .../components/Segment/SegmentItem.config.ts | 168 +-- .../src/components/Select/Select.config.ts | 1099 +++++++++-------- .../Skeleton/LineSkeleton.config.ts | 108 +- .../src/components/Slider/Slider.config.ts | 181 +-- .../src/components/Steps/Steps.config.ts | 332 ++--- .../src/components/Switch/Switch.config.ts | 103 +- .../src/components/Table/Table.config.ts | 180 +-- .../HorizontalIconTabItem.config.ts | 70 +- .../horizontal/HorizontalTabItem.config.ts | 258 ++-- .../Tabs/horizontal/HorizontalTabs.config.ts | 39 +- .../vertical/VerticalIconTabItem.config.ts | 23 +- .../Tabs/vertical/VerticalTabItem.config.ts | 90 +- .../Tabs/vertical/VerticalTabs.config.ts | 18 +- .../components/TextArea/TextArea.config.ts | 656 +++++----- .../TextField/TextField.clear.config.ts | 814 ++++++------ .../components/TextField/TextField.config.ts | 866 +++++++------ .../TextFieldGroup/TextFieldGroup.config.ts | 193 +-- .../TimePicker/TimePicker.config.ts | 406 +++--- .../src/components/Toast/Toast.config.ts | 80 +- .../src/components/Toolbar/Toolbar.config.ts | 11 +- .../src/components/Tooltip/Tooltip.config.ts | 41 +- .../src/components/Tree/Tree.config.ts | 109 +- .../src/components/Typography/Body.config.ts | 97 +- .../src/components/Typography/Dspl.config.ts | 59 +- .../components/Typography/Heading.config.ts | 116 +- .../src/components/Typography/Text.config.ts | 78 +- .../Popover/Popover.closeInner.config.ts | 31 +- .../_beta/Popover/Popover.closeNone.config.ts | 9 +- .../_beta/Tooltip/Tooltip.config.ts | 37 +- 69 files changed, 8701 insertions(+), 6988 deletions(-) diff --git a/packages/sdds-finai/src/components/Accordion/Accordion.config.ts b/packages/sdds-finai/src/components/Accordion/Accordion.config.ts index d70ce2c93e6..4a3619d622e 100644 --- a/packages/sdds-finai/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-finai/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,28 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,12 +36,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, @@ -24,14 +49,14 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -42,19 +67,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.875rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyLBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -63,19 +88,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -84,19 +109,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -105,19 +130,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXSBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.lineHeight}; `, h2: css` ${accordionTokens.accordionItemPaddingVertical}: 1rem; @@ -126,19 +151,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h2Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -147,19 +172,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 0.688rem; @@ -167,19 +192,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h5: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -187,19 +212,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h6: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -207,19 +232,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h6Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/sdds-finai/src/components/Attach/Attach.config.ts b/packages/sdds-finai/src/components/Attach/Attach.config.ts index b62ab061eec..26fbb05ae53 100644 --- a/packages/sdds-finai/src/components/Attach/Attach.config.ts +++ b/packages/sdds-finai/src/components/Attach/Attach.config.ts @@ -1,3 +1,54 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,439 +61,439 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.buttonColorActive}: var(--text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.buttonColorHover}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.buttonColorActive}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.iconButtonColorHover}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.iconButtonColorActive}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary-hover); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.buttonColorActive}: var(--text-primary-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColorHover}: ${textPrimaryHover}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.buttonColorActive}: ${textPrimaryActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary-hover); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonColorActive}: var(--text-primary-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonColorActive}: ${textPrimaryActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, success: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-positive); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfacePositive}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, warning: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-warning); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceWarning}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, critical: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-negative); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceNegative}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-negative-active); - - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; + + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, dark: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, black: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, white: css` - ${attachTokens.buttonColor}: var(--on-light-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.buttonColor}: ${onLightTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -457,12 +508,12 @@ export const config = { ${attachTokens.buttonWidth}: 12.5rem; ${attachTokens.buttonPadding}: 1.5rem; ${attachTokens.buttonRadius}: 0.875rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyL.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -481,37 +532,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonHeight}: 3.5rem; ${attachTokens.iconButtonWidth}: 3.5rem; ${attachTokens.iconButtonPadding}: 1.5rem; ${attachTokens.iconButtonRadius}: 0.875rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -520,12 +571,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -547,12 +598,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -571,37 +622,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -610,12 +661,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -637,12 +688,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -661,37 +712,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -700,12 +751,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -727,12 +778,12 @@ export const config = { ${attachTokens.buttonWidth}: 10rem; ${attachTokens.buttonPadding}: 0.75rem; ${attachTokens.buttonRadius}: 0.5rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -751,37 +802,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.25rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2rem; ${attachTokens.iconButtonWidth}: 2rem; ${attachTokens.iconButtonPadding}: 0.75rem; ${attachTokens.iconButtonRadius}: 0.5rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -790,12 +841,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/sdds-finai/src/components/Autocomplete/Autocomplete.config.ts b/packages/sdds-finai/src/components/Autocomplete/Autocomplete.config.ts index a7b1bddefa4..e81e429331c 100644 --- a/packages/sdds-finai/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/sdds-finai/src/components/Autocomplete/Autocomplete.config.ts @@ -1,4 +1,42 @@ -import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; +import { + bodyL, + bodyM, + bodyS, + bodyXS, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentNegativeHover, + outlineTransparentPositive, + outlineTransparentPositiveHover, + outlineTransparentWarning, + outlineTransparentWarningHover, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentCard, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; +import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { defaults: { @@ -9,190 +47,342 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-solid-primary); - ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineSolidPrimary}; + ${tokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-positive); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-positive-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldLeftHelperColorFocus}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-positive); - ${tokens.textFieldDividerColorHover}: var(--surface-positive); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentPositive}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentPositiveHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldLeftHelperColorFocus}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfacePositive}; + ${tokens.textFieldDividerColorHover}: ${surfacePositive}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-warning); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-warning-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldLeftHelperColorFocus}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-warning); - ${tokens.textFieldDividerColorHover}: var(--surface-warning); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentWarning}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentWarningHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldLeftHelperColorFocus}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceWarning}; + ${tokens.textFieldDividerColorHover}: ${surfaceWarning}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-negative); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-negative-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldLeftHelperColorFocus}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--surface-negative); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentNegative}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentNegativeHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldLeftHelperColorFocus}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${surfaceNegative}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, }, size: { + l: css` + ${tokens.textFieldHeight}: 3.5rem; + ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; + ${tokens.textFieldBorderRadius}: 0.875rem; + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldRightContentWithHintMargin}: -0.0625rem -0.438rem -0.0625rem 0.75rem; + + ${tokens.textFieldContentRightWrapperGap}: 0.25rem; + ${tokens.textFieldContentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; + + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; + + ${tokens.textFieldBorderWidth}: 0.125rem; + ${tokens.textFieldLabelOffset}: 0.75rem; + ${tokens.textFieldClearLabelOffset}: 0.25rem; + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; + + ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; + ${tokens.textFieldHintTargetSize}: 2.375rem; + ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; + ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; + + ${tokens.textFieldLeftHelperOffset}: 0.25rem; + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; + ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; + + ${tokens.textFieldIndicatorSizeInner}: 0.5rem; + ${tokens.textFieldIndicatorSizeOuter}: 0.375rem; + ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0; + ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.5rem auto auto -0.75rem; + ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto; + ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.625rem auto auto; + ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.5rem auto auto -0.875rem; + ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 1.5rem -0.875rem auto auto; + ${tokens.textFieldClearIndicatorHintInnerRight}: 1.5rem -2.488rem auto auto; + + ${tokens.borderRadius}: 0.875rem; + ${tokens.padding}: 0.125rem; + ${tokens.itemPadding}: 1.0625rem 1rem; + ${tokens.itemBorderRadius}: 0.75rem; + + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; + + ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; + ${tokens.emptyStateGap}: 0.5rem; + + ${tokens.infiniteLoaderSpinnerSize}: 1.5rem; + ${tokens.infiniteLoaderGap}: 0.5rem; + `, + m: css` + ${tokens.textFieldHeight}: 3rem; + ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; + ${tokens.textFieldBorderRadius}: 0.75rem; + + ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; + ${tokens.textFieldRightContentWithHintMargin}: -0.125rem -0.438rem -0.125rem 0.75rem; + + ${tokens.textFieldContentRightWrapperGap}: 0.25rem; + ${tokens.textFieldContentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; + + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; + + ${tokens.textFieldBorderWidth}: 0.125rem; + ${tokens.textFieldLabelOffset}: 0.625rem; + ${tokens.textFieldClearLabelOffset}: 0.25rem; + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; + + ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; + ${tokens.textFieldHintTargetSize}: 2.375rem; + ${tokens.textFieldHintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; + ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; + + ${tokens.textFieldLeftHelperOffset}: 0.25rem; + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; + ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; + + ${tokens.textFieldIndicatorSizeInner}: 0.5rem; + ${tokens.textFieldIndicatorSizeOuter}: 0.375rem; + ${tokens.textFieldIndicatorLabelPlacementInner}: 0 0 0 0; + ${tokens.textFieldIndicatorLabelPlacementOuter}: 0.375rem auto auto -0.75rem; + ${tokens.textFieldIndicatorLabelPlacementInnerRight}: 0 0 auto auto; + ${tokens.textFieldIndicatorLabelPlacementOuterRight}: 0.25rem -0.6875rem auto auto; + ${tokens.textFieldClearIndicatorLabelPlacementInner}: 1.25rem auto auto -0.875rem; + ${tokens.textFieldClearIndicatorLabelPlacementInnerRight}: 1.25rem -0.875rem auto auto; + ${tokens.textFieldClearIndicatorHintInnerRight}: 1.25rem -2.488rem auto auto; + + ${tokens.borderRadius}: 0.75rem; + ${tokens.padding}: 0.125rem; + ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; + ${tokens.itemBorderRadius}: 0.625rem; + + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; + + ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; + ${tokens.emptyStateGap}: 0.375rem; + + ${tokens.infiniteLoaderSpinnerSize}: 1.5rem; + ${tokens.infiniteLoaderGap}: 0.375rem; + `, s: css` ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; @@ -208,22 +398,22 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -231,12 +421,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -256,12 +446,12 @@ export const config = { ${tokens.itemPadding}: 0.6875rem 0.75rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -284,22 +474,22 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLabelOffset}: 0.375rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -307,12 +497,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -332,12 +522,12 @@ export const config = { ${tokens.itemPadding}: 0.5625rem 0.5rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; ${tokens.emptyStateGap}: 0.25rem; @@ -348,22 +538,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -376,12 +566,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -400,12 +590,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -419,27 +609,27 @@ export const config = { disabled: { true: css` ${tokens.textFieldDisabledOpacity}: 1; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentSecondary}; ${tokens.textFieldBorderColor}: transparent; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondary}; `, }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 1; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary); - ${tokens.textFieldBorderColorReadOnly}: var(--outline-solid-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondary}; + ${tokens.textFieldBorderColorReadOnly}: ${outlineSolidPrimary}; ${tokens.textFieldBorderWidth}: 0.125rem; `, }, diff --git a/packages/sdds-finai/src/components/Badge/Badge.config.ts b/packages/sdds-finai/src/components/Badge/Badge.config.ts index 3d8e8df196e..c8842445215 100644 --- a/packages/sdds-finai/src/components/Badge/Badge.config.ts +++ b/packages/sdds-finai/src/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +36,67 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -78,12 +106,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -97,12 +125,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -116,12 +144,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -135,12 +163,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -159,7 +187,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/sdds-finai/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/sdds-finai/src/components/Breadcrumbs/Breadcrumbs.config.ts index 1661a5df0e3..8a73bf38895 100644 --- a/packages/sdds-finai/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/sdds-finai/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,53 +20,53 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { l: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.5rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-l-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-l-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-l-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-l-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-l-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight}; `, m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${breadcrumbsTokens.breadcrumbsGap}: 0rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-xs-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-xs-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-xs-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-xs-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-xs-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-finai/src/components/Button/Button.config.ts b/packages/sdds-finai/src/components/Button/Button.config.ts index 229a57ade86..f506d1932cc 100644 --- a/packages/sdds-finai/src/components/Button/Button.config.ts +++ b/packages/sdds-finai/src/components/Button/Button.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,104 +53,104 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -118,12 +162,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.75rem; ${buttonTokens.buttonRadius}: 1rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.5rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -142,12 +186,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 0.875rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -166,12 +210,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -187,12 +231,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -208,12 +252,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -229,12 +273,12 @@ export const config = { ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: 0.375rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 0.75rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -253,7 +297,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/sdds-finai/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/sdds-finai/src/components/ButtonGroup/ButtonGroup.config.ts index a8fd7ba8051..544f3ee3d0b 100644 --- a/packages/sdds-finai/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/sdds-finai/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,124 +56,124 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, success: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; `, }, size: { @@ -136,12 +184,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 4rem; ${buttonGroupTokens.buttonPadding}: 1.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, l: css` ${buttonGroupTokens.buttonDefaultRadius}: 0.875rem; @@ -150,12 +198,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3.5rem; ${buttonGroupTokens.buttonPadding}: 1.5rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, m: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -165,12 +213,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -179,12 +227,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -193,12 +241,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -207,12 +255,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 1.5rem; ${buttonGroupTokens.buttonPadding}: 0.625rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-finai/src/components/Calendar/Calendar.config.ts b/packages/sdds-finai/src/components/Calendar/Calendar.config.ts index fc0a15388db..03dad7a9d6b 100644 --- a/packages/sdds-finai/src/components/Calendar/Calendar.config.ts +++ b/packages/sdds-finai/src/components/Calendar/Calendar.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,38 +35,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -51,46 +77,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +126,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 4rem; ${calendarBaseTokens.iconButtonWidth}: 4rem; @@ -120,46 +146,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -169,13 +195,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3.5rem; ${calendarBaseTokens.iconButtonWidth}: 3.5rem; @@ -189,46 +215,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -238,13 +264,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -258,46 +284,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -307,13 +333,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -327,46 +353,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -376,13 +402,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; @@ -400,12 +426,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -414,7 +440,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -425,12 +451,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -439,7 +465,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-finai/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-finai/src/components/Calendar/CalendarDouble.config.ts index 70c9a8be880..c3aa566fd9a 100644 --- a/packages/sdds-finai/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-finai/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,39 +35,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -52,46 +78,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +127,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 4rem; ${calendarDoubleTokens.iconButtonWidth}: 4rem; @@ -121,46 +147,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -170,13 +196,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; @@ -190,46 +216,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -239,13 +265,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -259,46 +285,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -308,13 +334,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -328,46 +354,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +403,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; @@ -401,12 +427,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -415,7 +441,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -426,12 +452,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -440,7 +466,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-finai/src/components/Card/Card.config.ts b/packages/sdds-finai/src/components/Card/Card.config.ts index 2899613fb13..074cb829620 100644 --- a/packages/sdds-finai/src/components/Card/Card.config.ts +++ b/packages/sdds-finai/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,7 +9,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/sdds-finai/src/components/Carousel/Carousel.config.ts b/packages/sdds-finai/src/components/Carousel/Carousel.config.ts index f3fd82e4491..f6d52e14f40 100644 --- a/packages/sdds-finai/src/components/Carousel/Carousel.config.ts +++ b/packages/sdds-finai/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +16,14 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary); - ${tokens.paginationDotActiveBackground}: var(--surface-solid-default); - ${tokens.controlIconButtonColor}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.controlIconButtonColorHover}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.controlIconButtonColorActive}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary}; + ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault}; + ${tokens.controlIconButtonColor}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.controlIconButtonColorHover}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.controlIconButtonColorActive}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, }, size: { diff --git a/packages/sdds-finai/src/components/Cell/Cell.config.ts b/packages/sdds-finai/src/components/Cell/Cell.config.ts index 6588088c11f..eda2b4c9a2a 100644 --- a/packages/sdds-finai/src/components/Cell/Cell.config.ts +++ b/packages/sdds-finai/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -87,26 +88,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -119,26 +120,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-finai/src/components/Checkbox/Checkbox.config.ts b/packages/sdds-finai/src/components/Checkbox/Checkbox.config.ts index 53d71aca8ad..b9eb08592af 100644 --- a/packages/sdds-finai/src/components/Checkbox/Checkbox.config.ts +++ b/packages/sdds-finai/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,18 +33,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -39,18 +55,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${checkboxTokens.margin}: 0; @@ -60,91 +76,91 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.125rem; ${checkboxTokens.contentTopOffset}: 0.0625rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyL.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${checkboxTokens.fillColor}: var(--text-primary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPrimary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${checkboxTokens.fillColor}: var(--text-secondary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textSecondary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${checkboxTokens.fillColor}: var(--text-tertiary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textTertiary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${checkboxTokens.fillColor}: var(--text-paragraph); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textParagraph}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${checkboxTokens.fillColor}: var(--text-positive); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPositive}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${checkboxTokens.fillColor}: var(--text-warning); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textWarning}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, negative: css` - ${checkboxTokens.fillColor}: var(--text-negative); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textNegative}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-negative); + ${checkboxTokens.triggerBorderColor}: ${textNegative}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -155,7 +171,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-finai/src/components/Chip/Chip.transparent.config.ts b/packages/sdds-finai/src/components/Chip/Chip.transparent.config.ts index fe3146e24e7..cecfd600393 100644 --- a/packages/sdds-finai/src/components/Chip/Chip.transparent.config.ts +++ b/packages/sdds-finai/src/components/Chip/Chip.transparent.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceTransparentAccent, + surfaceTransparentAccentActive, + surfaceTransparentAccentHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, chipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,78 +40,78 @@ export const config = { variations: { view: { default: css` - ${chipTokens.color}: var(--text-primary); - ${chipTokens.background}: var(--surface-transparent-secondary); - ${chipTokens.colorHover}: var(--text-primary-hover); - ${chipTokens.backgroundHover}: var(--surface-transparent-secondary-hover); - ${chipTokens.colorActive}: var(--text-primary-active); - ${chipTokens.backgroundActive}: var(--surface-transparent-secondary-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-secondary); - ${chipTokens.colorReadOnly}: var(--text-primary); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${chipTokens.colorReadOnlyHover}: var(--text-primary); - ${chipTokens.closeIconColor}: var(--text-tertiary); + ${chipTokens.color}: ${textPrimary}; + ${chipTokens.background}: ${surfaceTransparentSecondary}; + ${chipTokens.colorHover}: ${textPrimaryHover}; + ${chipTokens.backgroundHover}: ${surfaceTransparentSecondaryHover}; + ${chipTokens.colorActive}: ${textPrimaryActive}; + ${chipTokens.backgroundActive}: ${surfaceTransparentSecondaryActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentSecondary}; + ${chipTokens.colorReadOnly}: ${textPrimary}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${chipTokens.colorReadOnlyHover}: ${textPrimary}; + ${chipTokens.closeIconColor}: ${textTertiary}; `, secondary: css` - ${chipTokens.color}: var(--text-primary); - ${chipTokens.background}: var(--surface-transparent-secondary); - ${chipTokens.colorHover}: var(--text-primary-hover); - ${chipTokens.backgroundHover}: var(--surface-transparent-secondary-hover); - ${chipTokens.colorActive}: var(--text-primary-active); - ${chipTokens.backgroundActive}: var(--surface-transparent-secondary-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-secondary); - ${chipTokens.colorReadOnly}: var(--text-primary); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${chipTokens.colorReadOnlyHover}: var(--text-primary); - ${chipTokens.closeIconColor}: var(--text-tertiary); + ${chipTokens.color}: ${textPrimary}; + ${chipTokens.background}: ${surfaceTransparentSecondary}; + ${chipTokens.colorHover}: ${textPrimaryHover}; + ${chipTokens.backgroundHover}: ${surfaceTransparentSecondaryHover}; + ${chipTokens.colorActive}: ${textPrimaryActive}; + ${chipTokens.backgroundActive}: ${surfaceTransparentSecondaryActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentSecondary}; + ${chipTokens.colorReadOnly}: ${textPrimary}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${chipTokens.colorReadOnlyHover}: ${textPrimary}; + ${chipTokens.closeIconColor}: ${textTertiary}; `, accent: css` - ${chipTokens.color}: var(--text-accent); - ${chipTokens.background}: var(--surface-transparent-accent); - ${chipTokens.colorHover}: var(--text-accent); - ${chipTokens.backgroundHover}: var(--surface-transparent-accent-hover); - ${chipTokens.colorActive}: var(--text-accent); - ${chipTokens.backgroundActive}: var(--surface-transparent-accent-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-accent); - ${chipTokens.colorReadOnly}: var(--text-accent); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-accent); - ${chipTokens.colorReadOnlyHover}: var(--text-accent); + ${chipTokens.color}: ${textAccent}; + ${chipTokens.background}: ${surfaceTransparentAccent}; + ${chipTokens.colorHover}: ${textAccent}; + ${chipTokens.backgroundHover}: ${surfaceTransparentAccentHover}; + ${chipTokens.colorActive}: ${textAccent}; + ${chipTokens.backgroundActive}: ${surfaceTransparentAccentActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentAccent}; + ${chipTokens.colorReadOnly}: ${textAccent}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentAccent}; + ${chipTokens.colorReadOnlyHover}: ${textAccent}; `, positive: css` - ${chipTokens.color}: var(--text-positive); - ${chipTokens.background}: var(--surface-transparent-positive); - ${chipTokens.colorHover}: var(--text-positive); - ${chipTokens.backgroundHover}: var(--surface-transparent-positive-hover); - ${chipTokens.colorActive}: var(--text-positive); - ${chipTokens.backgroundActive}: var(--surface-transparent-positive-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-positive); - ${chipTokens.colorReadOnly}: var(--text-positive); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-positive); - ${chipTokens.colorReadOnlyHover}: var(--text-positive); + ${chipTokens.color}: ${textPositive}; + ${chipTokens.background}: ${surfaceTransparentPositive}; + ${chipTokens.colorHover}: ${textPositive}; + ${chipTokens.backgroundHover}: ${surfaceTransparentPositiveHover}; + ${chipTokens.colorActive}: ${textPositive}; + ${chipTokens.backgroundActive}: ${surfaceTransparentPositiveActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentPositive}; + ${chipTokens.colorReadOnly}: ${textPositive}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentPositive}; + ${chipTokens.colorReadOnlyHover}: ${textPositive}; `, warning: css` - ${chipTokens.color}: var(--text-warning); - ${chipTokens.background}: var(--surface-transparent-warning); - ${chipTokens.colorHover}: var(--text-warning); - ${chipTokens.backgroundHover}: var(--surface-transparent-warning-hover); - ${chipTokens.colorActive}: var(--text-warning); - ${chipTokens.backgroundActive}: var(--surface-transparent-warning-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-warning); - ${chipTokens.colorReadOnly}: var(--text-warning); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-warning); - ${chipTokens.colorReadOnlyHover}: var(--text-warning); + ${chipTokens.color}: ${textWarning}; + ${chipTokens.background}: ${surfaceTransparentWarning}; + ${chipTokens.colorHover}: ${textWarning}; + ${chipTokens.backgroundHover}: ${surfaceTransparentWarningHover}; + ${chipTokens.colorActive}: ${textWarning}; + ${chipTokens.backgroundActive}: ${surfaceTransparentWarningActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentWarning}; + ${chipTokens.colorReadOnly}: ${textWarning}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentWarning}; + ${chipTokens.colorReadOnlyHover}: ${textWarning}; `, negative: css` - ${chipTokens.color}: var(--text-negative); - ${chipTokens.background}: var(--surface-transparent-negative); - ${chipTokens.colorHover}: var(--text-negative); - ${chipTokens.backgroundHover}: var(--surface-transparent-negative-hover); - ${chipTokens.colorActive}: var(--text-negative); - ${chipTokens.backgroundActive}: var(--surface-transparent-negative-active); - ${chipTokens.backgroundReadOnly}: var(--surface-transparent-negative); - ${chipTokens.colorReadOnly}: var(--text-negative); - ${chipTokens.backgroundReadOnlyHover}: var(--surface-transparent-negative); - ${chipTokens.colorReadOnlyHover}: var(--text-negative); + ${chipTokens.color}: ${textNegative}; + ${chipTokens.background}: ${surfaceTransparentNegative}; + ${chipTokens.colorHover}: ${textNegative}; + ${chipTokens.backgroundHover}: ${surfaceTransparentNegativeHover}; + ${chipTokens.colorActive}: ${textNegative}; + ${chipTokens.backgroundActive}: ${surfaceTransparentNegativeActive}; + ${chipTokens.backgroundReadOnly}: ${surfaceTransparentNegative}; + ${chipTokens.colorReadOnly}: ${textNegative}; + ${chipTokens.backgroundReadOnlyHover}: ${surfaceTransparentNegative}; + ${chipTokens.colorReadOnlyHover}: ${textNegative}; `, }, size: { @@ -91,12 +122,12 @@ export const config = { ${chipTokens.height}: 3rem; ${chipTokens.padding}: 0 1rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${chipTokens.fontFamily}: ${bodyL.fontFamily}; + ${chipTokens.fontSize}: ${bodyL.fontSize}; + ${chipTokens.fontStyle}: ${bodyL.fontStyle}; + ${chipTokens.fontWeight}: ${bodyL.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyL.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.5rem; @@ -113,12 +144,12 @@ export const config = { ${chipTokens.height}: 2.5rem; ${chipTokens.padding}: 0 0.875rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${chipTokens.fontFamily}: ${bodyM.fontFamily}; + ${chipTokens.fontSize}: ${bodyM.fontSize}; + ${chipTokens.fontStyle}: ${bodyM.fontStyle}; + ${chipTokens.fontWeight}: ${bodyM.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyM.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.375rem; @@ -135,12 +166,12 @@ export const config = { ${chipTokens.height}: 2rem; ${chipTokens.padding}: 0 0.875rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${chipTokens.fontFamily}: ${bodyS.fontFamily}; + ${chipTokens.fontSize}: ${bodyS.fontSize}; + ${chipTokens.fontStyle}: ${bodyS.fontStyle}; + ${chipTokens.fontWeight}: ${bodyS.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyS.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.25rem; @@ -157,12 +188,12 @@ export const config = { ${chipTokens.height}: 1.5rem; ${chipTokens.padding}: 0 0.625rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${chipTokens.fontFamily}: ${bodyXS.fontFamily}; + ${chipTokens.fontSize}: ${bodyXS.fontSize}; + ${chipTokens.fontStyle}: ${bodyXS.fontStyle}; + ${chipTokens.fontWeight}: ${bodyXS.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyXS.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.25rem; @@ -179,12 +210,12 @@ export const config = { ${chipTokens.height}: 1.25rem; ${chipTokens.padding}: 0 0.5rem; - ${chipTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${chipTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${chipTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${chipTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${chipTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${chipTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${chipTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${chipTokens.fontSize}: ${bodyXXS.fontSize}; + ${chipTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${chipTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${chipTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${chipTokens.lineHeight}: ${bodyXXS.lineHeight}; ${chipTokens.leftContentMarginLeft}: -0.125rem; ${chipTokens.leftContentMarginRight}: 0.125rem; @@ -202,7 +233,7 @@ export const config = { }, focused: { true: css` - ${chipTokens.focusColor}: var(--surface-accent); + ${chipTokens.focusColor}: ${surfaceAccent}; `, }, pilled: { diff --git a/packages/sdds-finai/src/components/ChipGroup/ChipGroup.config.ts b/packages/sdds-finai/src/components/ChipGroup/ChipGroup.config.ts index 2bed06ad8c0..f4a2b75eed7 100644 --- a/packages/sdds-finai/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/sdds-finai/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +26,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +57,12 @@ export const config = { ${tokens.chipHeight}: 3rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.5rem; @@ -60,12 +78,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -81,12 +99,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; @@ -102,12 +120,12 @@ export const config = { ${tokens.chipHeight}: 1.5rem; ${tokens.chipPadding}: 0 0.625rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/sdds-finai/src/components/CodeField/CodeField.config.ts b/packages/sdds-finai/src/components/CodeField/CodeField.config.ts index d0109404d66..0f1b9790cb5 100644 --- a/packages/sdds-finai/src/components/CodeField/CodeField.config.ts +++ b/packages/sdds-finai/src/components/CodeField/CodeField.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodyXS, + outlineAccent, + surfaceAccent, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, codeFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,19 +26,19 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--surface-accent); + ${tokens.caretColor}: ${surfaceAccent}; - ${tokens.captionColor}: var(--text-secondary); - ${tokens.captionColorError}: var(--text-negative); + ${tokens.captionColor}: ${textSecondary}; + ${tokens.captionColorError}: ${textNegative}; - ${tokens.codeColor}: var(--text-primary); - ${tokens.codeColorError}: var(--text-negative); - ${tokens.borderColorFocus}: var(--outline-accent); + ${tokens.codeColor}: ${textPrimary}; + ${tokens.codeColorError}: ${textNegative}; + ${tokens.borderColorFocus}: ${outlineAccent}; - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; `, }, size: { @@ -34,19 +51,19 @@ export const config = { ${tokens.codeItemWidth}: 2.75rem; ${tokens.codeItemHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.captionFontFamily}: ${bodyS.fontFamily}; + ${tokens.captionFontSize}: ${bodyS.fontSize}; + ${tokens.captionFontStyle}: ${bodyS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyS.lineHeight}; ${tokens.borderRadius}: 0.875rem; ${tokens.borderRadiusSegmented}: 0.375rem; @@ -61,19 +78,19 @@ export const config = { ${tokens.codeItemWidth}: 2.375rem; ${tokens.codeItemHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.captionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.captionFontSize}: ${bodyXS.fontSize}; + ${tokens.captionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyXS.lineHeight}; ${tokens.borderRadius}: 0.75rem; ${tokens.borderRadiusSegmented}: 0.25rem; diff --git a/packages/sdds-finai/src/components/Combobox/Combobox.config.ts b/packages/sdds-finai/src/components/Combobox/Combobox.config.ts index ce4d3f74ed4..1af7032dd52 100644 --- a/packages/sdds-finai/src/components/Combobox/Combobox.config.ts +++ b/packages/sdds-finai/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,40 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentNegativeHover, + outlineTransparentPositive, + outlineTransparentPositiveHover, + outlineTransparentWarning, + outlineTransparentWarningHover, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentCard, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,235 +46,235 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-solid-primary); - ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineSolidPrimary}; + ${tokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-positive); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-positive-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldLeftHelperColorFocus}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentPositive}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentPositiveHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldLeftHelperColorFocus}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-warning); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-warning-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldLeftHelperColorFocus}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentWarning}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentWarningHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldLeftHelperColorFocus}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-negative); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-negative-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentNegative}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentNegativeHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -257,20 +294,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -279,12 +316,12 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -307,12 +344,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 1rem; ${tokens.padding}: 0.125rem; @@ -334,19 +371,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -379,21 +416,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -401,12 +438,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -429,12 +466,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -456,19 +493,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -501,21 +538,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -523,12 +560,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -551,12 +588,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 0.625rem 0.875rem 0.625rem 0.875rem; ${tokens.padding}: 0.125rem; @@ -578,19 +615,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -623,21 +660,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -645,12 +682,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -673,12 +710,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 0.5rem 0.625rem 0.5rem 0.625rem; ${tokens.padding}: 0.125rem; @@ -700,19 +737,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -732,22 +769,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -760,12 +797,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -784,12 +821,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -803,26 +840,26 @@ export const config = { disabled: { true: css` ${tokens.textFieldDisabledOpacity}: 1; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentSecondary}; ${tokens.textFieldBorderColor}: transparent; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondary}; `, }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 1; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary); - ${tokens.textFieldBorderColorReadOnly}: var(--outline-solid-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondary}; + ${tokens.textFieldBorderColorReadOnly}: ${outlineSolidPrimary}; ${tokens.textFieldBorderWidth}: 0.125rem; `, }, diff --git a/packages/sdds-finai/src/components/Counter/Counter.config.ts b/packages/sdds-finai/src/components/Counter/Counter.config.ts index 140aa43a57f..5662bb15c3e 100644 --- a/packages/sdds-finai/src/components/Counter/Counter.config.ts +++ b/packages/sdds-finai/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,32 +23,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -41,56 +56,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-finai/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-finai/src/components/DatePicker/DatePicker.config.ts index 9a9ad4ab91c..032379a9915 100644 --- a/packages/sdds-finai/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-finai/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentPositive, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentCard, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,121 +52,121 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-card); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.borderColor}: var(--outline-solid-primary); - ${tokens.borderColorHover}: var(--outline-solid-primary-hover); - ${tokens.borderColorFocus}: var(--outline-accent); - ${tokens.borderColorError}: var(--outline-transparent-negative); - ${tokens.borderColorSuccess}: var(--outline-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-solid-primary); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorError}: var(--outline-transparent-negative); - ${tokens.textFieldBorderColorErrorFocus}: var(--outline-accent); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorSuccess}: var(--outline-transparent-positive); - ${tokens.textFieldBorderColorSuccessFocus}: var(--outline-accent); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentCard}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.borderColor}: ${outlineSolidPrimary}; + ${tokens.borderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.borderColorFocus}: ${outlineAccent}; + ${tokens.borderColorError}: ${outlineTransparentNegative}; + ${tokens.borderColorSuccess}: ${outlineTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineSolidPrimary}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorError}: ${outlineTransparentNegative}; + ${tokens.textFieldBorderColorErrorFocus}: ${outlineAccent}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorSuccess}: ${outlineTransparentPositive}; + ${tokens.textFieldBorderColorSuccessFocus}: ${outlineAccent}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -132,12 +176,12 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -147,12 +191,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -176,20 +220,20 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -207,46 +251,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -257,25 +301,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -287,12 +331,12 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -302,12 +346,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -331,20 +375,20 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -362,46 +406,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -412,25 +456,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -442,12 +486,12 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -457,12 +501,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -486,20 +530,20 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -517,46 +561,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -567,25 +611,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -597,12 +641,12 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -612,12 +656,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -641,20 +685,20 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -672,46 +716,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -722,25 +766,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -757,12 +801,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -771,7 +815,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -782,12 +826,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -796,7 +840,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -806,19 +850,19 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-card); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentCard}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; - ${tokens.textFieldBorderColorReadOnly}: var(--outline-solid-primary); + ${tokens.textFieldBorderColorReadOnly}: ${outlineSolidPrimary}; ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.rightContentOpacityReadOnly}: 0.4; diff --git a/packages/sdds-finai/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/sdds-finai/src/components/DateTimePicker/DateTimePicker.config.ts index 9594f8bb591..2d1844fefb7 100644 --- a/packages/sdds-finai/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/sdds-finai/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,44 @@ +import { + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentPositive, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentCard, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,96 +51,96 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldBorderColor}: var(--outline-solid-primary); - ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldBorderColorError}: var(--outline-transparent-negative); - ${tokens.textFieldBorderColorSuccess}: var(--outline-transparent-positive); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldBorderColor}: ${outlineSolidPrimary}; + ${tokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldBorderColorError}: ${outlineTransparentNegative}; + ${tokens.textFieldBorderColorSuccess}: ${outlineTransparentPositive}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -119,30 +160,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -152,12 +193,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -174,46 +215,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -224,13 +265,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -243,21 +284,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -279,30 +320,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -312,12 +353,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -334,46 +375,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -384,13 +425,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -403,21 +444,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -492,12 +533,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -506,7 +547,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -517,12 +558,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -531,44 +572,44 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 1; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondary}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondary}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentSecondary}; ${tokens.textFieldBorderColor}: transparent; `, }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondary}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-card); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentCard}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; - ${tokens.textFieldBorderColorReadOnly}: var(--outline-solid-primary); + ${tokens.textFieldBorderColorReadOnly}: ${outlineSolidPrimary}; ${tokens.textFieldBorderWidth}: 0.125rem; `, }, diff --git a/packages/sdds-finai/src/components/Divider/Divider.config.ts b/packages/sdds-finai/src/components/Divider/Divider.config.ts index df0449d5c06..9633c4105a5 100644 --- a/packages/sdds-finai/src/components/Divider/Divider.config.ts +++ b/packages/sdds-finai/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/sdds-finai/src/components/Drawer/Drawer.config.ts b/packages/sdds-finai/src/components/Drawer/Drawer.config.ts index b0b00b15040..b89c0cada87 100644 --- a/packages/sdds-finai/src/components/Drawer/Drawer.config.ts +++ b/packages/sdds-finai/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/sdds-finai/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-finai/src/components/Dropdown/Dropdown.config.ts index 051722e15fd..1c63153b413 100644 --- a/packages/sdds-finai/src/components/Dropdown/Dropdown.config.ts +++ b/packages/sdds-finai/src/components/Dropdown/Dropdown.config.ts @@ -1,4 +1,12 @@ -import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; +import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { defaults: { @@ -7,6 +15,80 @@ export const config = { }, variations: { size: { + xl: css` + ${tokens.padding}: 0.125rem; + ${tokens.width}: 17.5rem; + ${tokens.borderRadius}: 1rem; + + ${tokens.itemHeight}: 1.5rem; + ${tokens.itemPadding}: 1.25rem 1.125rem; + ${tokens.itemPaddingTight}: 1rem 1.125rem; + ${tokens.itemBorderRadius}: 1rem; + + ${tokens.dividerMarginTop}: 0.625rem; + ${tokens.dividerMarginRight}: 1.25rem; + ${tokens.dividerMarginBottom}: 0.625rem; + ${tokens.dividerMarginLeft}: 1.25rem; + ${tokens.dividerMarginTopTight}: 0.5rem; + ${tokens.dividerMarginBottomTight}: 0.5rem; + + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; + + ${tokens.cellPadding}: 0rem; + ${tokens.cellPaddingLeftContent}: 0rem; + ${tokens.cellPaddingContent}: 0rem; + ${tokens.cellPaddingRightContent}: 0rem; + ${tokens.cellTextboxGap}: 0.125rem; + ${tokens.cellGap}: 0.5rem; + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + `, + l: css` + ${tokens.padding}: 0.125rem; + ${tokens.width}: 17.5rem; + ${tokens.borderRadius}: 0.875rem; + + ${tokens.itemHeight}: 1.5rem; + ${tokens.itemPadding}: 1rem 1.125rem; + ${tokens.itemPaddingTight}: 0.75rem 1.125rem; + ${tokens.itemBorderRadius}: 0.75rem; + + ${tokens.dividerMarginTop}: 0.5rem; + ${tokens.dividerMarginRight}: 1.125rem; + ${tokens.dividerMarginBottom}: 0.5rem; + ${tokens.dividerMarginLeft}: 1.125rem; + ${tokens.dividerMarginTopTight}: 0.375rem; + ${tokens.dividerMarginBottomTight}: 0.375rem; + + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; + + ${tokens.cellPadding}: 0rem; + ${tokens.cellPaddingLeftContent}: 0rem; + ${tokens.cellPaddingContent}: 0rem; + ${tokens.cellPaddingRightContent}: 0rem; + ${tokens.cellTextboxGap}: 0.125rem; + ${tokens.cellGap}: 0.375rem; + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + `, m: css` ${tokens.padding}: 0.25rem; ${tokens.width}: 15rem; @@ -24,12 +106,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -37,12 +119,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 0.25rem; @@ -61,12 +143,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -74,12 +156,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.padding}: 0.25rem; @@ -98,12 +180,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.125rem; ${tokens.dividerMarginBottomTight}: 0.125rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -111,18 +193,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/sdds-finai/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-finai/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..35093009032 100644 --- a/packages/sdds-finai/src/components/Dropzone/Dropzone.config.ts +++ b/packages/sdds-finai/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-finai/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/sdds-finai/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..7ca852ab69e 100644 --- a/packages/sdds-finai/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/sdds-finai/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-finai/src/components/EmptyState/EmptyState.config.ts b/packages/sdds-finai/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..c2e9d580587 100644 --- a/packages/sdds-finai/src/components/EmptyState/EmptyState.config.ts +++ b/packages/sdds-finai/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-finai/src/components/IconButton/IconButton.config.ts b/packages/sdds-finai/src/components/IconButton/IconButton.config.ts index 8a28d321fd7..65a274fef8c 100644 --- a/packages/sdds-finai/src/components/IconButton/IconButton.config.ts +++ b/packages/sdds-finai/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,74 +49,74 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -85,12 +125,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 4rem; ${iconButtonTokens.iconButtonPadding}: 1.75rem; ${iconButtonTokens.iconButtonRadius}: 1rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -100,12 +140,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3.5rem; ${iconButtonTokens.iconButtonPadding}: 1.5rem; ${iconButtonTokens.iconButtonRadius}: 0.875rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -115,12 +155,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -130,12 +170,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -145,12 +185,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -160,12 +200,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 1.5rem; ${iconButtonTokens.iconButtonPadding}: 0.5rem; ${iconButtonTokens.iconButtonRadius}: 0.375rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 0.625rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -178,7 +218,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-finai/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/sdds-finai/src/components/InformationWrapper/InformationWrapper.config.ts index 0fed91296a6..a812ad46800 100644 --- a/packages/sdds-finai/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/sdds-finai/src/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,50 +21,50 @@ export const config = { variations: { view: { default: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { s: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -63,29 +76,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.875rem -2.310rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -95,12 +108,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, xs: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -112,29 +125,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.688rem -2.125rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -146,10 +159,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -162,12 +175,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -186,12 +199,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; diff --git a/packages/sdds-finai/src/components/LinkButton/LinkButton.config.ts b/packages/sdds-finai/src/components/LinkButton/LinkButton.config.ts index 2ec1d625a04..3d429fc1cc3 100644 --- a/packages/sdds-finai/src/components/LinkButton/LinkButton.config.ts +++ b/packages/sdds-finai/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,29 @@ +import { + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +34,70 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, }, size: { @@ -79,12 +105,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -98,12 +124,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/sdds-finai/src/components/List/List.config.ts b/packages/sdds-finai/src/components/List/List.config.ts index b0a7acc37b0..a5b4a718395 100644 --- a/packages/sdds-finai/src/components/List/List.config.ts +++ b/packages/sdds-finai/src/components/List/List.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +17,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +38,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${listTokens.listItemFontFamily}: ${bodyXS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyXS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyXS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyXS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${listTokens.listItemPaddingTop}: 0.689rem; @@ -46,12 +55,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -63,12 +72,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -80,12 +89,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, xl: css` ${listTokens.listItemPaddingTop}: 1.3125rem; @@ -97,12 +106,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-finai/src/components/Modal/Modal.config.ts b/packages/sdds-finai/src/components/Modal/Modal.config.ts index 8b107b98ea3..b410e871b98 100644 --- a/packages/sdds-finai/src/components/Modal/Modal.config.ts +++ b/packages/sdds-finai/src/components/Modal/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,16 +16,16 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-finai/src/components/Note/Note.config.ts b/packages/sdds-finai/src/components/Note/Note.config.ts index 76e6e79ff13..67311f2a057 100644 --- a/packages/sdds-finai/src/components/Note/Note.config.ts +++ b/packages/sdds-finai/src/components/Note/Note.config.ts @@ -1,3 +1,25 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textL, + textLBold, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textSecondary, + textSecondaryHover, + textWarning, + textXS, + textXSBold, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +30,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -44,8 +66,8 @@ export const config = { ${tokens.closeIconTop}: 1rem; ${tokens.closeIconRight}: 1rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -53,20 +75,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 2rem; ${tokens.fixedContentBeforePadding}: 0.25rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.titleFontFamily}: ${textL.fontFamily}; + ${tokens.titleFontSize}: ${textL.fontSize}; + ${tokens.titleFontStyle}: ${textL.fontStyle}; + ${tokens.titleFontWeight}: ${textLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textL.letterSpacing}; + ${tokens.titleLineHeight}: ${textL.lineHeight}; ${tokens.titlePaddingRight}: 1.875rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.textFontFamily}: ${textL.fontFamily}; + ${tokens.textFontSize}: ${textL.fontSize}; + ${tokens.textFontStyle}: ${textL.fontStyle}; + ${tokens.textFontWeight}: ${textL.fontWeight}; + ${tokens.textLetterSpacing}: ${textL.letterSpacing}; + ${tokens.textLineHeight}: ${textL.lineHeight}; `, m: css` ${tokens.padding}: 1.25rem 1.5rem; @@ -78,8 +100,8 @@ export const config = { ${tokens.closeIconTop}: 0.75rem; ${tokens.closeIconRight}: 0.75rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -87,20 +109,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; ${tokens.titlePaddingRight}: 1.75rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -112,8 +134,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -121,20 +143,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.titleFontFamily}: ${textS.fontFamily}; + ${tokens.titleFontSize}: ${textS.fontSize}; + ${tokens.titleFontStyle}: ${textS.fontStyle}; + ${tokens.titleFontWeight}: ${textSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; + ${tokens.titleLineHeight}: ${textS.lineHeight}; ${tokens.titlePaddingRight}: 1.625rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.textFontFamily}: ${textS.fontFamily}; + ${tokens.textFontSize}: ${textS.fontSize}; + ${tokens.textFontStyle}: ${textS.fontStyle}; + ${tokens.textFontWeight}: ${textS.fontWeight}; + ${tokens.textLetterSpacing}: ${textS.letterSpacing}; + ${tokens.textLineHeight}: ${textS.lineHeight}; `, xs: css` ${tokens.padding}: 0.75rem 1rem; @@ -146,8 +168,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1rem; ${tokens.closeIconButtonSize}: 1rem; @@ -155,20 +177,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.titleFontFamily}: ${textXS.fontFamily}; + ${tokens.titleFontSize}: ${textXS.fontSize}; + ${tokens.titleFontStyle}: ${textXS.fontStyle}; + ${tokens.titleFontWeight}: ${textXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.titleLineHeight}: ${textXS.lineHeight}; ${tokens.titlePaddingRight}: 1.5rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.textFontFamily}: ${textXS.fontFamily}; + ${tokens.textFontSize}: ${textXS.fontSize}; + ${tokens.textFontStyle}: ${textXS.fontStyle}; + ${tokens.textFontWeight}: ${textXS.fontWeight}; + ${tokens.textLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.textLineHeight}: ${textXS.lineHeight}; `, }, }, diff --git a/packages/sdds-finai/src/components/Notification/Notification.config.ts b/packages/sdds-finai/src/components/Notification/Notification.config.ts index 3963e77e1e2..99144e8b9f7 100644 --- a/packages/sdds-finai/src/components/Notification/Notification.config.ts +++ b/packages/sdds-finai/src/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +20,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +52,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +106,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +160,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +214,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +268,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/sdds-finai/src/components/NumberInput/NumberInput.config.ts b/packages/sdds-finai/src/components/NumberInput/NumberInput.config.ts index e55e70fd713..dee322e8b29 100644 --- a/packages/sdds-finai/src/components/NumberInput/NumberInput.config.ts +++ b/packages/sdds-finai/src/components/NumberInput/NumberInput.config.ts @@ -1,3 +1,40 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseSurfaceTransparentSecondary, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextTertiary, + onDarkSurfaceTransparentSecondary, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextTertiary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,26 +47,26 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-solid-default); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${inverseSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceSolidDefault}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -37,26 +74,26 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, secondary: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.iconButtonColorSolidActive}: var(--text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -64,27 +101,27 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, accent: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--inverse-text-primary); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--on-dark-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--on-dark-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-accent); - - ${tokens.iconButtonColor}: var(--on-dark-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-accent); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${inverseTextPrimary}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${onDarkTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${onDarkTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${onDarkSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceAccent}; + + ${tokens.iconButtonColor}: ${onDarkTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${onDarkTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${onDarkTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -92,25 +129,25 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, clear: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; ${tokens.backgroundColorSolid}: transparent; - ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonColor}: ${textPrimary}; ${tokens.iconButtonBackgroundColor}: transparent; - ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; ${tokens.iconButtonBackgroundColorHover}: transparent; - ${tokens.iconButtonColorActive}: var(--text-primary-active); + ${tokens.iconButtonColorActive}: ${textPrimaryActive}; ${tokens.iconButtonBackgroundColorActive}: transparent; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -125,12 +162,12 @@ export const config = { ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${tokens.iconButtonRadius}: 0.875rem; ${tokens.iconButtonSegmentationRadius}: 0.375rem; @@ -140,12 +177,12 @@ export const config = { ${tokens.textWrapperHeight}: 3.5rem; ${tokens.textWrapperPadding}: 1.063rem 1.125rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -157,12 +194,12 @@ export const config = { ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -172,12 +209,12 @@ export const config = { ${tokens.textWrapperHeight}: 3rem; ${tokens.textWrapperPadding}: 0.875rem 1rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -189,12 +226,12 @@ export const config = { ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 1rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.625rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -204,12 +241,12 @@ export const config = { ${tokens.textWrapperHeight}: 2.5rem; ${tokens.textWrapperPadding}: 0.688rem 0.875rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -221,12 +258,12 @@ export const config = { ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.75rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${tokens.iconButtonRadius}: 0.5rem; ${tokens.iconButtonSegmentationRadius}: 0.125rem; @@ -236,12 +273,12 @@ export const config = { ${tokens.textWrapperHeight}: 2rem; ${tokens.textWrapperPadding}: 0.563rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -257,8 +294,8 @@ export const config = { }, inputBackgroundType: { fill: css` - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimary}; `, clear: css` ${tokens.backgroundColor}: transparent; diff --git a/packages/sdds-finai/src/components/Pagination/Pagination.config.ts b/packages/sdds-finai/src/components/Pagination/Pagination.config.ts index c12205e5cde..6b3cbc30b4e 100644 --- a/packages/sdds-finai/src/components/Pagination/Pagination.config.ts +++ b/packages/sdds-finai/src/components/Pagination/Pagination.config.ts @@ -1,4 +1,34 @@ -import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components'; +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; +import { css, paginationTokens } from '@salutejs/plasma-new-hope/emotion'; export const config = { defaults: { @@ -9,129 +39,211 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; ${paginationTokens.inputBorderColor}:transparent; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, }, size: { + l: css` + ${paginationTokens.paginationFontFamily}: ${bodyL.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyL.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyL.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyLBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyL.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyL.lineHeight}; + + ${paginationTokens.buttonHeight}: 3.5rem; + ${paginationTokens.buttonWidth}: 3rem; + ${paginationTokens.buttonWidthShorter}: 2.25rem; + ${paginationTokens.paginationInputWidth}: 4rem; + ${paginationTokens.buttonRadius}: 0.875rem; + ${paginationTokens.paginationIconSize}: 1.2rem; + ${paginationTokens.paginationIconDoubleSize}: 1.45rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; + + ${paginationTokens.selectHeight}: auto; + ${paginationTokens.selectPaddingTop}: 0.125rem; + ${paginationTokens.selectPaddingRight}: 0.125rem; + ${paginationTokens.selectPaddingBottom}: 0.125rem; + ${paginationTokens.selectPaddingLeft}: 0.125rem; + + ${paginationTokens.selectItemHeight}: 1.5rem; + ${paginationTokens.selectItemPadding}: 1rem 1rem 1rem 1rem; + ${paginationTokens.selectItemContentLeftWidth}: 1.875rem; + ${paginationTokens.selectItemBackground}: transparent; + + ${paginationTokens.selectTargetArrowRight}: 1rem; + ${paginationTokens.selectTargetPadding}: 1.5rem 0 1.5rem; + ${paginationTokens.selectTargetInnerTop}: 0.5rem; + ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; + + ${paginationTokens.inputBorderRadius}: 0.875rem; + ${paginationTokens.inputWidth}: 4rem; + ${paginationTokens.inputHeight}: 3.5rem; + ${paginationTokens.inputPadding}: 0 0.625rem; + ${paginationTokens.inputBorderWidth}: 0.0625rem; + + ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; + `, + m: css` + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; + + ${paginationTokens.buttonHeight}: 3rem; + ${paginationTokens.buttonWidth}: 3rem; + ${paginationTokens.buttonWidthShorter}: 2rem; + ${paginationTokens.paginationInputWidth}: 3.5rem; + ${paginationTokens.buttonRadius}: 0.75rem; + ${paginationTokens.paginationIconSize}: 1.05rem; + ${paginationTokens.paginationIconDoubleSize}: 1.3rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; + + ${paginationTokens.selectHeight}: auto; + ${paginationTokens.selectPaddingTop}: 0.125rem; + ${paginationTokens.selectPaddingRight}: 0.125rem; + ${paginationTokens.selectPaddingBottom}: 0.125rem; + ${paginationTokens.selectPaddingLeft}: 0.125rem; + + ${paginationTokens.selectItemHeight}: 1.5rem; + ${paginationTokens.selectItemPadding}: 0.75rem 0.75rem 0.75rem 0.75rem; + ${paginationTokens.selectItemContentLeftWidth}: 1.75rem; + ${paginationTokens.selectItemBackground}: transparent; + + ${paginationTokens.selectTargetArrowRight}: 0.875rem; + ${paginationTokens.selectTargetPadding}: 1.25rem 0 1.25rem; + ${paginationTokens.selectTargetInnerTop}: 0.5rem; + ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; + + ${paginationTokens.inputBorderRadius}: 0.75rem; + ${paginationTokens.inputWidth}: 3.5rem; + ${paginationTokens.inputHeight}: 3rem; + ${paginationTokens.inputPadding}: 0 0.625rem; + ${paginationTokens.inputBorderWidth}: 0.0625rem; + + ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; + `, s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; @@ -167,12 +279,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, xs: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-xs-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-xs-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-xs-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyXS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyXS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyXS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyXSBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyXS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyXS.lineHeight}; ${paginationTokens.buttonHeight}: 2rem; ${paginationTokens.paginationInputWidth}: 2.5rem; diff --git a/packages/sdds-finai/src/components/Popover/Popover.config.ts b/packages/sdds-finai/src/components/Popover/Popover.config.ts index 2f9acaf14e8..7cd6a08b79d 100644 --- a/packages/sdds-finai/src/components/Popover/Popover.config.ts +++ b/packages/sdds-finai/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/sdds-finai/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/sdds-finai/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index 6a6449f99a4..5c1548b8feb 100644 --- a/packages/sdds-finai/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/sdds-finai/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +70,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -63,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -76,12 +96,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -89,12 +109,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -102,12 +122,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -115,12 +135,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -128,12 +148,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-finai/src/components/Radiobox/Radiobox.config.ts b/packages/sdds-finai/src/components/Radiobox/Radiobox.config.ts index d5fc23d48b3..fbcb3896a42 100644 --- a/packages/sdds-finai/src/components/Radiobox/Radiobox.config.ts +++ b/packages/sdds-finai/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,18 +37,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,18 +60,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${radioboxTokens.margin}: 0; @@ -66,19 +82,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.625rem; ${radioboxTokens.contentTopOffset}: 0.0625rem; ${radioboxTokens.contentLeftOffset}: 0.75rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyL.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -86,74 +102,74 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${radioboxTokens.fillColor}: var(--text-primary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPrimary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${radioboxTokens.fillColor}: var(--text-secondary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textSecondary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${radioboxTokens.fillColor}: var(--text-tertiary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textTertiary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${radioboxTokens.fillColor}: var(--text-paragraph); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textParagraph}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${radioboxTokens.fillColor}: var(--text-positive); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPositive}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${radioboxTokens.fillColor}: var(--text-warning); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textWarning}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated negative: css` - ${radioboxTokens.fillColor}: var(--text-negative); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textNegative}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -164,7 +180,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-finai/src/components/Range/Range.config.ts b/packages/sdds-finai/src/components/Range/Range.config.ts index 91baf7ee6ec..0d87c581be8 100644 --- a/packages/sdds-finai/src/components/Range/Range.config.ts +++ b/packages/sdds-finai/src/components/Range/Range.config.ts @@ -1,3 +1,37 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentNegativeHover, + outlineTransparentPositive, + outlineTransparentPositiveHover, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentCard, + surfaceTransparentCardHover, + surfaceTransparentNegative, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveHover, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,65 +44,65 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-card); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.borderColor}: var(--outline-solid-primary); - ${tokens.borderColorError}: var(--outline-transparent-negative); - ${tokens.borderColorSuccess}: var(--outline-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-card-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorHover}: var(--surface-transparent-negative-hover); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorErrorHover}: var(--outline-transparent-negative-hover); - ${tokens.textFieldBorderColorErrorFocus}: var(--outline-accent); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorHover}: var(--surface-transparent-positive-hover); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorSuccessHover}: var(--outline-transparent-positive-hover); - ${tokens.textFieldBorderColorSuccessFocus}: var(--outline-accent); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceTransparentCard}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.borderColor}: ${outlineSolidPrimary}; + ${tokens.borderColorError}: ${outlineTransparentNegative}; + ${tokens.borderColorSuccess}: ${outlineTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentCardHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorErrorHover}: ${outlineTransparentNegativeHover}; + ${tokens.textFieldBorderColorErrorFocus}: ${outlineAccent}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorSuccessHover}: ${outlineTransparentPositiveHover}; + ${tokens.textFieldBorderColorSuccessFocus}: ${outlineAccent}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -77,12 +111,12 @@ export const config = { ${tokens.borderWidth}: 0.125rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -90,12 +124,12 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; @@ -103,12 +137,12 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 4rem; @@ -126,22 +160,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -154,12 +188,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -167,12 +201,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; @@ -180,12 +214,12 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -203,22 +237,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -232,12 +266,12 @@ export const config = { ${tokens.borderWidth}: 0.125rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -245,12 +279,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; @@ -258,12 +292,12 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -281,22 +315,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -310,12 +344,12 @@ export const config = { ${tokens.borderWidth}: 0.125rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -323,12 +357,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; @@ -336,12 +370,12 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -359,22 +393,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -388,12 +422,12 @@ export const config = { ${tokens.borderWidth}: 0.125rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -401,12 +435,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; @@ -414,12 +448,12 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -437,22 +471,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,10 +498,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -480,12 +514,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -504,12 +538,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -524,27 +558,27 @@ export const config = { true: css` ${tokens.disabledOpacity}: 1; ${tokens.textFieldBackgroundColor}: transparent; - ${tokens.background}: var(--surface-transparent-secondary); + ${tokens.background}: ${surfaceTransparentSecondary}; ${tokens.borderColor}: transparent; - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotColor}: var(--text-secondary); + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotColor}: ${textSecondary}; `, }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-card); - ${tokens.background}: var(--surface-transparent-card); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentCard}; + ${tokens.background}: ${surfaceTransparentCard}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 1; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotColor}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-finai/src/components/Segment/SegmentGroup.config.ts b/packages/sdds-finai/src/components/Segment/SegmentGroup.config.ts index b03cb7140c7..841b7a3272c 100644 --- a/packages/sdds-finai/src/components/Segment/SegmentGroup.config.ts +++ b/packages/sdds-finai/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +9,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -74,7 +75,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary}; `, }, orientation: { diff --git a/packages/sdds-finai/src/components/Segment/SegmentItem.config.ts b/packages/sdds-finai/src/components/Segment/SegmentItem.config.ts index 550c948b39d..e476c0418c1 100644 --- a/packages/sdds-finai/src/components/Segment/SegmentItem.config.ts +++ b/packages/sdds-finai/src/components/Segment/SegmentItem.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,68 +32,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -83,12 +107,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${segmentTokens.itemBorderRadius}: 0.625rem; @@ -100,12 +124,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -117,12 +141,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, l: css` ${segmentTokens.itemBorderRadius}: 0.875rem; @@ -134,12 +158,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, xl: css` ${segmentTokens.itemBorderRadius}: 1rem; @@ -151,12 +175,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-finai/src/components/Select/Select.config.ts b/packages/sdds-finai/src/components/Select/Select.config.ts index 5b1c883566e..8e1432aada1 100644 --- a/packages/sdds-finai/src/components/Select/Select.config.ts +++ b/packages/sdds-finai/src/components/Select/Select.config.ts @@ -1,3 +1,80 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + onLightTextSecondaryActive, + onLightTextSecondaryHover, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentNegativeHover, + outlineTransparentPositive, + outlineTransparentPositiveHover, + outlineTransparentWarning, + outlineTransparentWarningHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentCard, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,363 +87,363 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-solid-primary); - ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineSolidPrimary}; + ${tokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-positive); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-positive-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldLeftHelperColorFocus}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentPositive}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentPositiveHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldLeftHelperColorFocus}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-warning); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-warning-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldLeftHelperColorFocus}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentWarning}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentWarningHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldLeftHelperColorFocus}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-transparent-negative); - ${tokens.textFieldBorderColorHover}: var(--outline-transparent-negative-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldLeftHelperColorFocus}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineTransparentNegative}; + ${tokens.textFieldBorderColorHover}: ${outlineTransparentNegativeHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldLeftHelperColorFocus}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, accent: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-accent); - ${tokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-accent-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceAccent}; + ${tokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, secondary: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, clear: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-active); - ${tokens.buttonBackgroundColor}: var(--surface-clear); - ${tokens.buttonBackgroundColorHover}: var(--surface-clear); - ${tokens.buttonBackgroundColorActive}: var(--surface-clear); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryActive}; + ${tokens.buttonBackgroundColor}: ${surfaceClear}; + ${tokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${tokens.buttonBackgroundColorActive}: ${surfaceClear}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, dark: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-transparent-deep); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceTransparentDeep}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceTransparentDeepHover}; + ${tokens.buttonBackgroundColorActive}:${onLightSurfaceTransparentDeepActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, black: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, white: css` - ${tokens.buttonColor}: var(--on-light-text-primary); - ${tokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-light-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-light-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-light-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-light-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-dark-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); - - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); + ${tokens.buttonColor}: ${onLightTextPrimary}; + ${tokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onLightTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onLightTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onLightTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onLightTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onDarkSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onDarkSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}:${onDarkSurfaceSolidDefaultActive}; + + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -386,20 +463,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -408,12 +485,12 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -436,12 +513,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; ${tokens.targetHeight}: 3.5rem; @@ -467,19 +544,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -512,21 +589,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -534,12 +611,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -562,12 +639,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -593,19 +670,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -638,21 +715,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -660,12 +737,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -688,12 +765,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; @@ -719,19 +796,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -764,20 +841,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -786,12 +863,12 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.125rem; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -814,12 +891,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2rem; @@ -845,19 +922,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -877,69 +954,69 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--on-dark-text-primary); - ${tokens.textFieldChipColorHover}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${onDarkTextPrimary}; + ${tokens.textFieldChipColorHover}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCard}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -952,12 +1029,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -976,12 +1053,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -995,27 +1072,27 @@ export const config = { disabled: { true: css` ${tokens.textFieldDisabledOpacity}: 1; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentSecondary}; ${tokens.textFieldBorderColor}: transparent; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondary}; `, }, readOnly: { true: css` ${tokens.disclosureIconOpacityReadOnly}: 1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary); - ${tokens.textFieldBorderColorReadOnly}: var(--outline-accent) + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondary}; + ${tokens.textFieldBorderColorReadOnly}: ${outlineAccent} `, }, }, diff --git a/packages/sdds-finai/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-finai/src/components/Skeleton/LineSkeleton.config.ts index 54a10502b46..2916d254fd0 100644 --- a/packages/sdds-finai/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-finai/src/components/Skeleton/LineSkeleton.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + dsplL, + dsplM, + dsplS, + h1, + h2, + h3, + h4, + h5, + h6, + surfaceSkeletonDeepGradient, + surfaceSkeletonGradient, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textL, + textM, + textS, + textXS, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, skeletonTokens } from '@salutejs/plasma-new-hope/styled-components'; // INFO: у нас нет централизованного, через theme, способа задавать токен для skeleton gradient @@ -10,88 +34,88 @@ export const config = { variations: { view: { default: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient, linear-gradient(270.00deg, rgb(232, 238, 242) 0.538%,rgb(255, 255, 255) 51.426%,rgb(232, 238, 242) 100%)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonGradient}, linear-gradient(270.00deg, rgb(232, 238, 242) 0.538%,rgb(255, 255, 255) 51.426%,rgb(232, 238, 242) 100%)); + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, lighter: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient-lighter, linear-gradient(90.00deg, rgb(192, 203, 211) 1.601%,rgba(247, 249, 251, 0.5) 51.511%,rgb(192, 203, 211) 99.846%)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonDeepGradient}, linear-gradient(90.00deg, rgb(192, 203, 211) 1.601%,rgba(247, 249, 251, 0.5) 51.511%,rgb(192, 203, 211) 99.846%)); + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, }, size: { bodyL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size); + ${skeletonTokens.lineHeight}: ${bodyL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyL.fontSize}; `, bodyM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size); + ${skeletonTokens.lineHeight}: ${bodyM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyM.fontSize}; `, bodyS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size); + ${skeletonTokens.lineHeight}: ${bodyS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyS.fontSize}; `, bodyXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXS.fontSize}; `, bodyXXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXXS.fontSize}; `, dsplL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size); + ${skeletonTokens.lineHeight}: ${dsplL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplL.fontSize}; `, dsplM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size); + ${skeletonTokens.lineHeight}: ${dsplM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplM.fontSize}; `, dsplS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size); + ${skeletonTokens.lineHeight}: ${dsplS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplS.fontSize}; `, h1: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size); + ${skeletonTokens.lineHeight}: ${h1.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h1.fontSize}; `, h2: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size); + ${skeletonTokens.lineHeight}: ${h2.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h2.fontSize}; `, h3: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size); + ${skeletonTokens.lineHeight}: ${h3.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h3.fontSize}; `, h4: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size); + ${skeletonTokens.lineHeight}: ${h4.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h4.fontSize}; `, h5: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); + ${skeletonTokens.lineHeight}: ${h5.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h5.fontSize}; `, h6: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + ${skeletonTokens.lineHeight}: ${h6.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h6.fontSize}; `, textL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); + ${skeletonTokens.lineHeight}: ${textL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textL.fontSize}; `, textM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size); + ${skeletonTokens.lineHeight}: ${textM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textM.fontSize}; `, textS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size); + ${skeletonTokens.lineHeight}: ${textS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textS.fontSize}; `, textXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size); + ${skeletonTokens.lineHeight}: ${textXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textXS.fontSize}; `, }, }, diff --git a/packages/sdds-finai/src/components/Slider/Slider.config.ts b/packages/sdds-finai/src/components/Slider/Slider.config.ts index e77ef580402..2cfa4574420 100644 --- a/packages/sdds-finai/src/components/Slider/Slider.config.ts +++ b/packages/sdds-finai/src/components/Slider/Slider.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + outlineSolidTertiary, + surfaceAccent, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,48 +25,48 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--outline-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${outlineSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--outline-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${outlineSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, }, size: { @@ -63,24 +80,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -97,12 +114,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -114,24 +131,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -148,12 +165,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -165,24 +182,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -199,12 +216,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-finai/src/components/Steps/Steps.config.ts b/packages/sdds-finai/src/components/Steps/Steps.config.ts index 93d45772f0a..0c32cdec61a 100644 --- a/packages/sdds-finai/src/components/Steps/Steps.config.ts +++ b/packages/sdds-finai/src/components/Steps/Steps.config.ts @@ -1,42 +1,72 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -47,10 +77,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -60,26 +90,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -100,33 +130,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.5rem; ${tokens.largeBulletIndentHeight}: 1.25rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyL.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyM.fontFamily}; + ${tokens.contentFontSize}: ${bodyM.fontSize}; + ${tokens.contentFontStyle}: ${bodyM.fontStyle}; + ${tokens.contentFontWeight}: ${bodyM.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyM.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -147,33 +177,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -194,33 +224,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -241,33 +271,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 0.75rem; ${tokens.largeBulletIndentHeight}: 0.5rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -278,8 +308,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/sdds-finai/src/components/Switch/Switch.config.ts b/packages/sdds-finai/src/components/Switch/Switch.config.ts index 8a08bd686d8..f20f365b39b 100644 --- a/packages/sdds-finai/src/components/Switch/Switch.config.ts +++ b/packages/sdds-finai/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,50 +24,50 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -83,17 +96,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -104,7 +117,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-finai/src/components/Table/Table.config.ts b/packages/sdds-finai/src/components/Table/Table.config.ts index 770fa22b6d8..fab8897f3d9 100644 --- a/packages/sdds-finai/src/components/Table/Table.config.ts +++ b/packages/sdds-finai/src/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + surfaceTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +28,12 @@ export const config = { }, size: { l: css` - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.headerRowHeight}: 3.125rem; ${tokens.rowHeight}: 3.125rem; @@ -31,9 +43,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.5rem; ${tokens.editableCellIconButtonWidth}: 3rem; @@ -42,18 +54,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.875rem; ${tokens.editableCellInputPadding}: 0 0.75rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.75rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.875rem; @@ -63,12 +75,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -76,20 +88,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.5rem 0.875rem; ${tokens.selectControlPanelGap}: 0.5rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight}; `, m: css` - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.headerRowHeight}: 2.75rem; ${tokens.rowHeight}: 2.75rem; @@ -99,9 +111,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.375rem; ${tokens.editableCellIconButtonWidth}: 2.5rem; @@ -110,18 +122,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.625rem; ${tokens.editableCellInputPadding}: 0 0.625rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.75rem; @@ -131,12 +143,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -144,20 +156,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.75rem; ${tokens.selectControlPanelGap}: 0.625rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, s: css` - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.headerRowHeight}: 2.125rem; ${tokens.rowHeight}: 2.125rem; @@ -167,9 +179,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.25rem; ${tokens.editableCellIconButtonWidth}: 2rem; @@ -178,18 +190,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.5rem; ${tokens.editableCellInputPadding}: 0 0.375rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.25rem 0.5rem; ${tokens.buttonHeight}: 1.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.625rem; @@ -199,12 +211,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.25rem 0 0; ${tokens.selectItemIconSize}: 1rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 0.875rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -212,12 +224,12 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.5rem; ${tokens.selectControlPanelGap}: 0.25rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 8b2e20b8ce7..88484dca2ef 100644 --- a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,13 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,78 +18,78 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; diff --git a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index f70368f502f..25a83fc9fcf 100644 --- a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h1, + h2, + h3, + h4, + h5, + h6, + inverseTextPrimary, + inverseTextSecondary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,106 +34,106 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -123,12 +149,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -142,12 +168,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -161,12 +187,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -180,12 +206,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -197,12 +223,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tabsTokens.fontFamily}: ${h6.fontFamily}; + ${tabsTokens.fontSize}: ${h6.fontSize}; + ${tabsTokens.fontStyle}: ${h6.fontStyle}; + ${tabsTokens.fontWeight}: ${h6.fontWeight}; + ${tabsTokens.letterSpacing}: ${h6.letterSpacing}; + ${tabsTokens.lineHeight}: ${h6.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -214,12 +240,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -231,12 +257,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -248,12 +274,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -265,12 +291,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -282,12 +308,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 688bcbb498e..e99fc5a4950 100644 --- a/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-finai/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +16,33 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(--text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(--text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); - + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(--text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-finai/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/sdds-finai/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index c1b4b62e4a1..f0996ce22de 100644 --- a/packages/sdds-finai/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/sdds-finai/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/sdds-finai/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-finai/src/components/Tabs/vertical/VerticalTabItem.config.ts index c819eeeacbd..9e9c5dcffaf 100644 --- a/packages/sdds-finai/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-finai/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +24,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +65,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -69,12 +85,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -89,12 +105,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -109,12 +125,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/sdds-finai/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/sdds-finai/src/components/Tabs/vertical/VerticalTabs.config.ts index 8d93f27fb96..5f0cbf82a21 100644 --- a/packages/sdds-finai/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/sdds-finai/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,14 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(--text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-finai/src/components/TextArea/TextArea.config.ts b/packages/sdds-finai/src/components/TextArea/TextArea.config.ts index 5873f6846f0..5b961146af1 100644 --- a/packages/sdds-finai/src/components/TextArea/TextArea.config.ts +++ b/packages/sdds-finai/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentNegativeHover, + outlineTransparentPositive, + outlineTransparentPositiveHover, + outlineTransparentWarning, + outlineTransparentWarningHover, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentCard, + surfaceTransparentCardActive, + surfaceTransparentCardHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, textAreaTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,176 +56,176 @@ export const config = { variations: { view: { default: css` - ${textAreaTokens.backgroundColor}: var(--surface-transparent-card); - ${textAreaTokens.backgroundColorHover}: var(--surface-transparent-card-hover); - ${textAreaTokens.backgroundColorActive}: var(--surface-transparent-card-active); - ${textAreaTokens.backgroundColorFocus}: var(--surface-transparent-card); - ${textAreaTokens.borderColor}: var(--outline-solid-primary); - ${textAreaTokens.borderColorHover}: var(--outline-solid-primary-hover); - ${textAreaTokens.borderColorFocus}: var(--outline-accent); - ${textAreaTokens.inputColor}: var(--text-primary); - ${textAreaTokens.inputColorFocus}: var(--text-primary); - ${textAreaTokens.inputCaretColor}: var(--text-accent); - ${textAreaTokens.placeholderColor}: var(--text-secondary); - ${textAreaTokens.placeholderColorFocus}: var(--text-tertiary); - - ${textAreaTokens.leftHelperColor}: var(--text-secondary); - ${textAreaTokens.leftHelperColorFocus}: var(--text-secondary); - ${textAreaTokens.rightHelperColor}: var(--text-secondary); - ${textAreaTokens.indicatorColor}: var(--surface-negative); - ${textAreaTokens.optionalColor}: var(--text-tertiary); - - ${textAreaTokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${textAreaTokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${textAreaTokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${textAreaTokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${textAreaTokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${textAreaTokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${textAreaTokens.dividerColor}: var(--surface-transparent-tertiary); - ${textAreaTokens.dividerColorHover}: var(--text-secondary); - ${textAreaTokens.dividerColorFocus}: var(--surface-accent); - ${textAreaTokens.titleCaptionColor}: var(--text-secondary); - ${textAreaTokens.hintIconColor}: var(--text-secondary); + ${textAreaTokens.backgroundColor}: ${surfaceTransparentCard}; + ${textAreaTokens.backgroundColorHover}: ${surfaceTransparentCardHover}; + ${textAreaTokens.backgroundColorActive}: ${surfaceTransparentCardActive}; + ${textAreaTokens.backgroundColorFocus}: ${surfaceTransparentCard}; + ${textAreaTokens.borderColor}: ${outlineSolidPrimary}; + ${textAreaTokens.borderColorHover}: ${outlineSolidPrimaryHover}; + ${textAreaTokens.borderColorFocus}: ${outlineAccent}; + ${textAreaTokens.inputColor}: ${textPrimary}; + ${textAreaTokens.inputColorFocus}: ${textPrimary}; + ${textAreaTokens.inputCaretColor}: ${textAccent}; + ${textAreaTokens.placeholderColor}: ${textSecondary}; + ${textAreaTokens.placeholderColorFocus}: ${textTertiary}; + + ${textAreaTokens.leftHelperColor}: ${textSecondary}; + ${textAreaTokens.leftHelperColorFocus}: ${textSecondary}; + ${textAreaTokens.rightHelperColor}: ${textSecondary}; + ${textAreaTokens.indicatorColor}: ${surfaceNegative}; + ${textAreaTokens.optionalColor}: ${textTertiary}; + + ${textAreaTokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${textAreaTokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${textAreaTokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${textAreaTokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${textAreaTokens.dividerColor}: ${surfaceTransparentTertiary}; + ${textAreaTokens.dividerColorHover}: ${textSecondary}; + ${textAreaTokens.dividerColorFocus}: ${surfaceAccent}; + ${textAreaTokens.titleCaptionColor}: ${textSecondary}; + ${textAreaTokens.hintIconColor}: ${textSecondary}; `, positive: css` - ${textAreaTokens.backgroundColor}: var(--surface-transparent-positive); - ${textAreaTokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${textAreaTokens.backgroundColorActive}: var(--surface-transparent-positive-active); - ${textAreaTokens.backgroundColorFocus}: var(--surface-transparent-card); - ${textAreaTokens.borderColor}: var(--outline-transparent-positive); - ${textAreaTokens.borderColorHover}: var(--outline-transparent-positive-hover); - ${textAreaTokens.borderColorFocus}: var(--outline-accent); - ${textAreaTokens.inputColor}: var(--text-primary); - - ${textAreaTokens.inputColorFocus}: var(--text-primary); - ${textAreaTokens.inputCaretColor}: var(--text-accent); - ${textAreaTokens.placeholderColor}: var(--text-secondary); - ${textAreaTokens.placeholderColorFocus}: var(--text-tertiary); - - ${textAreaTokens.leftHelperColor}: var(--text-positive); - ${textAreaTokens.leftHelperColorFocus}: var(--text-secondary); - ${textAreaTokens.rightHelperColor}: var(--text-secondary); - ${textAreaTokens.indicatorColor}: var(--surface-negative); - ${textAreaTokens.optionalColor}: var(--text-tertiary); - - ${textAreaTokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${textAreaTokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${textAreaTokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${textAreaTokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${textAreaTokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${textAreaTokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${textAreaTokens.dividerColor}: var(--surface-positive); - ${textAreaTokens.dividerColorHover}: var(--surface-positive); - ${textAreaTokens.dividerColorFocus}: var(--surface-accent); - ${textAreaTokens.titleCaptionColor}: var(--text-secondary); - ${textAreaTokens.hintIconColor}: var(--text-secondary); + ${textAreaTokens.backgroundColor}: ${surfaceTransparentPositive}; + ${textAreaTokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${textAreaTokens.backgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${textAreaTokens.backgroundColorFocus}: ${surfaceTransparentCard}; + ${textAreaTokens.borderColor}: ${outlineTransparentPositive}; + ${textAreaTokens.borderColorHover}: ${outlineTransparentPositiveHover}; + ${textAreaTokens.borderColorFocus}: ${outlineAccent}; + ${textAreaTokens.inputColor}: ${textPrimary}; + + ${textAreaTokens.inputColorFocus}: ${textPrimary}; + ${textAreaTokens.inputCaretColor}: ${textAccent}; + ${textAreaTokens.placeholderColor}: ${textSecondary}; + ${textAreaTokens.placeholderColorFocus}: ${textTertiary}; + + ${textAreaTokens.leftHelperColor}: ${textPositive}; + ${textAreaTokens.leftHelperColorFocus}: ${textSecondary}; + ${textAreaTokens.rightHelperColor}: ${textSecondary}; + ${textAreaTokens.indicatorColor}: ${surfaceNegative}; + ${textAreaTokens.optionalColor}: ${textTertiary}; + + ${textAreaTokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${textAreaTokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${textAreaTokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${textAreaTokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${textAreaTokens.dividerColor}: ${surfacePositive}; + ${textAreaTokens.dividerColorHover}: ${surfacePositive}; + ${textAreaTokens.dividerColorFocus}: ${surfaceAccent}; + ${textAreaTokens.titleCaptionColor}: ${textSecondary}; + ${textAreaTokens.hintIconColor}: ${textSecondary}; `, /** * @deprecated * Использовать `default` */ primary: css` - ${textAreaTokens.backgroundColor}: var(--surface-transparent-card); - ${textAreaTokens.backgroundColorHover}: var(--surface-transparent-card-hover); - ${textAreaTokens.backgroundColorActive}: var(--surface-transparent-card-active); - ${textAreaTokens.backgroundColorFocus}: var(--surface-transparent-card); - ${textAreaTokens.borderColor}: var(--outline-solid-primary); - ${textAreaTokens.borderColorHover}: var(--outline-solid-primary-hover); - ${textAreaTokens.borderColorFocus}: var(--outline-accent); - ${textAreaTokens.inputColor}: var(--text-primary); - ${textAreaTokens.inputColorFocus}: var(--text-primary); - ${textAreaTokens.inputCaretColor}: var(--text-accent); - ${textAreaTokens.placeholderColor}: var(--text-secondary); - ${textAreaTokens.placeholderColorFocus}: var(--text-tertiary); - - ${textAreaTokens.leftHelperColor}: var(--text-secondary); - ${textAreaTokens.leftHelperColorFocus}: var(--text-secondary); - ${textAreaTokens.rightHelperColor}: var(--text-secondary); - ${textAreaTokens.indicatorColor}: var(--surface-negative); - ${textAreaTokens.optionalColor}: var(--text-tertiary); - - ${textAreaTokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${textAreaTokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${textAreaTokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${textAreaTokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${textAreaTokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${textAreaTokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${textAreaTokens.dividerColor}: var(--surface-transparent-tertiary); - ${textAreaTokens.dividerColorHover}: var(--text-secondary); - ${textAreaTokens.dividerColorFocus}: var(--surface-accent); - ${textAreaTokens.titleCaptionColor}: var(--text-secondary); - ${textAreaTokens.hintIconColor}: var(--text-secondary); + ${textAreaTokens.backgroundColor}: ${surfaceTransparentCard}; + ${textAreaTokens.backgroundColorHover}: ${surfaceTransparentCardHover}; + ${textAreaTokens.backgroundColorActive}: ${surfaceTransparentCardActive}; + ${textAreaTokens.backgroundColorFocus}: ${surfaceTransparentCard}; + ${textAreaTokens.borderColor}: ${outlineSolidPrimary}; + ${textAreaTokens.borderColorHover}: ${outlineSolidPrimaryHover}; + ${textAreaTokens.borderColorFocus}: ${outlineAccent}; + ${textAreaTokens.inputColor}: ${textPrimary}; + ${textAreaTokens.inputColorFocus}: ${textPrimary}; + ${textAreaTokens.inputCaretColor}: ${textAccent}; + ${textAreaTokens.placeholderColor}: ${textSecondary}; + ${textAreaTokens.placeholderColorFocus}: ${textTertiary}; + + ${textAreaTokens.leftHelperColor}: ${textSecondary}; + ${textAreaTokens.leftHelperColorFocus}: ${textSecondary}; + ${textAreaTokens.rightHelperColor}: ${textSecondary}; + ${textAreaTokens.indicatorColor}: ${surfaceNegative}; + ${textAreaTokens.optionalColor}: ${textTertiary}; + + ${textAreaTokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${textAreaTokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${textAreaTokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${textAreaTokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${textAreaTokens.dividerColor}: ${surfaceTransparentTertiary}; + ${textAreaTokens.dividerColorHover}: ${textSecondary}; + ${textAreaTokens.dividerColorFocus}: ${surfaceAccent}; + ${textAreaTokens.titleCaptionColor}: ${textSecondary}; + ${textAreaTokens.hintIconColor}: ${textSecondary}; `, warning: css` - ${textAreaTokens.backgroundColor}: var(--surface-transparent-warning); - ${textAreaTokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${textAreaTokens.backgroundColorActive}: var(--surface-transparent-warning-active); - ${textAreaTokens.backgroundColorFocus}: var(--surface-transparent-card); - ${textAreaTokens.borderColor}: var(--outline-transparent-warning); - ${textAreaTokens.borderColorHover}: var(--outline-transparent-warning-hover); - ${textAreaTokens.borderColorFocus}: var(--outline-accent); - ${textAreaTokens.inputColor}: var(--text-primary); - - ${textAreaTokens.inputColorFocus}: var(--text-primary); - ${textAreaTokens.inputCaretColor}: var(--text-accent); - ${textAreaTokens.placeholderColor}: var(--text-secondary); - ${textAreaTokens.placeholderColorFocus}: var(--text-tertiary); - - ${textAreaTokens.leftHelperColor}: var(--text-warning); - ${textAreaTokens.leftHelperColorFocus}: var(--text-secondary); - ${textAreaTokens.rightHelperColor}: var(--text-secondary); - ${textAreaTokens.indicatorColor}: var(--surface-negative); - ${textAreaTokens.optionalColor}: var(--text-tertiary); - - ${textAreaTokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${textAreaTokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${textAreaTokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${textAreaTokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${textAreaTokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${textAreaTokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${textAreaTokens.dividerColor}: var(--surface-warning); - ${textAreaTokens.dividerColorHover}: var(--surface-warning); - ${textAreaTokens.dividerColorFocus}: var(--surface-accent); - ${textAreaTokens.titleCaptionColor}: var(--text-secondary); - ${textAreaTokens.hintIconColor}: var(--text-secondary); + ${textAreaTokens.backgroundColor}: ${surfaceTransparentWarning}; + ${textAreaTokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${textAreaTokens.backgroundColorActive}: ${surfaceTransparentWarningActive}; + ${textAreaTokens.backgroundColorFocus}: ${surfaceTransparentCard}; + ${textAreaTokens.borderColor}: ${outlineTransparentWarning}; + ${textAreaTokens.borderColorHover}: ${outlineTransparentWarningHover}; + ${textAreaTokens.borderColorFocus}: ${outlineAccent}; + ${textAreaTokens.inputColor}: ${textPrimary}; + + ${textAreaTokens.inputColorFocus}: ${textPrimary}; + ${textAreaTokens.inputCaretColor}: ${textAccent}; + ${textAreaTokens.placeholderColor}: ${textSecondary}; + ${textAreaTokens.placeholderColorFocus}: ${textTertiary}; + + ${textAreaTokens.leftHelperColor}: ${textWarning}; + ${textAreaTokens.leftHelperColorFocus}: ${textSecondary}; + ${textAreaTokens.rightHelperColor}: ${textSecondary}; + ${textAreaTokens.indicatorColor}: ${surfaceNegative}; + ${textAreaTokens.optionalColor}: ${textTertiary}; + + ${textAreaTokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${textAreaTokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${textAreaTokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${textAreaTokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${textAreaTokens.dividerColor}: ${surfaceWarning}; + ${textAreaTokens.dividerColorHover}: ${surfaceWarning}; + ${textAreaTokens.dividerColorFocus}: ${surfaceAccent}; + ${textAreaTokens.titleCaptionColor}: ${textSecondary}; + ${textAreaTokens.hintIconColor}: ${textSecondary}; `, negative: css` - ${textAreaTokens.backgroundColor}: var(--surface-transparent-negative); - ${textAreaTokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${textAreaTokens.backgroundColorActive}: var(--surface-transparent-negative-active); - ${textAreaTokens.backgroundColorFocus}: var(--surface-transparent-card); - ${textAreaTokens.borderColor}: var(--outline-transparent-negative); - ${textAreaTokens.borderColorHover}: var(--outline-transparent-negative-hover); - ${textAreaTokens.borderColorFocus}: var(--outline-accent); - ${textAreaTokens.inputColor}: var(--text-primary); - - ${textAreaTokens.inputColorFocus}: var(--text-primary); - ${textAreaTokens.inputCaretColor}: var(--text-accent); - ${textAreaTokens.placeholderColor}: var(--text-secondary); - ${textAreaTokens.placeholderColorFocus}: var(--text-tertiary); - - ${textAreaTokens.leftHelperColor}: var(--text-negative); - ${textAreaTokens.leftHelperColorFocus}: var(--text-secondary); - ${textAreaTokens.rightHelperColor}: var(--text-secondary); - ${textAreaTokens.indicatorColor}: var(--surface-negative); - ${textAreaTokens.optionalColor}: var(--text-tertiary); - - ${textAreaTokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${textAreaTokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${textAreaTokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${textAreaTokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${textAreaTokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${textAreaTokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${textAreaTokens.dividerColor}: var(--surface-negative); - ${textAreaTokens.dividerColorHover}: var(--surface-negative); - ${textAreaTokens.dividerColorFocus}: var(--surface-accent); - ${textAreaTokens.titleCaptionColor}: var(--text-secondary); - ${textAreaTokens.hintIconColor}: var(--text-secondary); + ${textAreaTokens.backgroundColor}: ${surfaceTransparentNegative}; + ${textAreaTokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${textAreaTokens.backgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${textAreaTokens.backgroundColorFocus}: ${surfaceTransparentCard}; + ${textAreaTokens.borderColor}: ${outlineTransparentNegative}; + ${textAreaTokens.borderColorHover}: ${outlineTransparentNegativeHover}; + ${textAreaTokens.borderColorFocus}: ${outlineAccent}; + ${textAreaTokens.inputColor}: ${textPrimary}; + + ${textAreaTokens.inputColorFocus}: ${textPrimary}; + ${textAreaTokens.inputCaretColor}: ${textAccent}; + ${textAreaTokens.placeholderColor}: ${textSecondary}; + ${textAreaTokens.placeholderColorFocus}: ${textTertiary}; + + ${textAreaTokens.leftHelperColor}: ${textNegative}; + ${textAreaTokens.leftHelperColorFocus}: ${textSecondary}; + ${textAreaTokens.rightHelperColor}: ${textSecondary}; + ${textAreaTokens.indicatorColor}: ${surfaceNegative}; + ${textAreaTokens.optionalColor}: ${textTertiary}; + + ${textAreaTokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${textAreaTokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${textAreaTokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${textAreaTokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${textAreaTokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${textAreaTokens.dividerColor}: ${surfaceNegative}; + ${textAreaTokens.dividerColorHover}: ${surfaceNegative}; + ${textAreaTokens.dividerColorFocus}: ${surfaceAccent}; + ${textAreaTokens.titleCaptionColor}: ${textSecondary}; + ${textAreaTokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -203,27 +251,27 @@ export const config = { ${textAreaTokens.rightContentRight}: 1.25rem; ${textAreaTokens.rightContentHeight}: 1.5rem; ${textAreaTokens.labelMarginBottom}: 0.75rem; - ${textAreaTokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.labelInnerTop}: 0.813rem; ${textAreaTokens.labelInnerTopHelper}: -0.313rem; ${textAreaTokens.labelInnerMarginBottom}: 0.25rem; - ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${textAreaTokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${textAreaTokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${textAreaTokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); - ${textAreaTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.inputFontFamily}: ${bodyL.fontFamily}; + ${textAreaTokens.inputFontSize}: ${bodyL.fontSize}; + ${textAreaTokens.inputFontStyle}: ${bodyL.fontStyle}; + ${textAreaTokens.inputFontWeight}: ${bodyL.fontWeight}; + ${textAreaTokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${textAreaTokens.inputLineHeight}: ${bodyL.lineHeight}; + ${textAreaTokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.helpersFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.indicatorSizeInner}: 0.5rem; ${textAreaTokens.indicatorSizeOuter}: 0.375rem; ${textAreaTokens.indicatorLabelPlacementInner}: 0 0 0 0; @@ -241,12 +289,12 @@ export const config = { ${textAreaTokens.clearIndicatorHintInnerRight}: 1.5rem -2.488rem auto auto; ${textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${textAreaTokens.inputWidth}: 100%; @@ -270,26 +318,26 @@ export const config = { ${textAreaTokens.rightContentRight}: 1rem; ${textAreaTokens.rightContentHeight}: 1.25rem; ${textAreaTokens.labelMarginBottom}: 0.75rem; - ${textAreaTokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.labelInnerTop}: 0.563rem; ${textAreaTokens.labelInnerMarginBottom}: 0.125rem; - ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${textAreaTokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${textAreaTokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${textAreaTokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); - ${textAreaTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.inputFontFamily}: ${bodyL.fontFamily}; + ${textAreaTokens.inputFontSize}: ${bodyL.fontSize}; + ${textAreaTokens.inputFontStyle}: ${bodyL.fontStyle}; + ${textAreaTokens.inputFontWeight}: ${bodyL.fontWeight}; + ${textAreaTokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${textAreaTokens.inputLineHeight}: ${bodyL.lineHeight}; + ${textAreaTokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.helpersFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.indicatorSizeInner}: 0.5rem; ${textAreaTokens.indicatorSizeOuter}: 0.375rem; ${textAreaTokens.indicatorLabelPlacementInner}: 0 0 0 0; @@ -307,12 +355,12 @@ export const config = { ${textAreaTokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${textAreaTokens.inputWidth}: 100%; @@ -336,26 +384,26 @@ export const config = { ${textAreaTokens.rightContentRight}: 0.875rem; ${textAreaTokens.rightContentHeight}: 1.25rem; ${textAreaTokens.labelMarginBottom}: 0.625rem; - ${textAreaTokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.labelInnerTop}: 0.375rem; ${textAreaTokens.labelInnerMarginBottom}: 0.125rem; - ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${textAreaTokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${textAreaTokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${textAreaTokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); - ${textAreaTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.inputFontFamily}: ${bodyM.fontFamily}; + ${textAreaTokens.inputFontSize}: ${bodyM.fontSize}; + ${textAreaTokens.inputFontStyle}: ${bodyM.fontStyle}; + ${textAreaTokens.inputFontWeight}: ${bodyM.fontWeight}; + ${textAreaTokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${textAreaTokens.inputLineHeight}: ${bodyM.lineHeight}; + ${textAreaTokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.helpersFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.indicatorSizeInner}: 0.5rem; ${textAreaTokens.indicatorSizeOuter}: 0.375rem; ${textAreaTokens.indicatorLabelPlacementInner}: 0 0 0 0; @@ -375,12 +423,12 @@ export const config = { ${textAreaTokens.hintInnerLabelPlacementOffset}:0.312rem -2.813rem auto auto; ${textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${textAreaTokens.inputWidth}: 100%; @@ -404,26 +452,26 @@ export const config = { ${textAreaTokens.rightContentRight}: 0.75rem; ${textAreaTokens.rightContentHeight}: 1.25rem; ${textAreaTokens.labelMarginBottom}: 0.5rem; - ${textAreaTokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.labelInnerTop}: 0.375rem; ${textAreaTokens.labelInnerMarginBottom}: 0.125rem; - ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${textAreaTokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${textAreaTokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${textAreaTokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); - ${textAreaTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.inputFontFamily}: ${bodyS.fontFamily}; + ${textAreaTokens.inputFontSize}: ${bodyS.fontSize}; + ${textAreaTokens.inputFontStyle}: ${bodyS.fontStyle}; + ${textAreaTokens.inputFontWeight}: ${bodyS.fontWeight}; + ${textAreaTokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${textAreaTokens.inputLineHeight}: ${bodyS.lineHeight}; + ${textAreaTokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.helpersFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.indicatorSizeInner}: 0.375rem; ${textAreaTokens.indicatorSizeOuter}: 0.375rem; ${textAreaTokens.indicatorLabelPlacementInner}: 0 0 0 0; @@ -441,12 +489,12 @@ export const config = { ${textAreaTokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${textAreaTokens.inputWidth}: 100%; @@ -470,26 +518,26 @@ export const config = { ${textAreaTokens.rightContentRight}: 0.5rem; ${textAreaTokens.rightContentHeight}: 1rem; ${textAreaTokens.labelMarginBottom}: 0.375rem; - ${textAreaTokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${textAreaTokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${textAreaTokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${textAreaTokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${textAreaTokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${textAreaTokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${textAreaTokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${textAreaTokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${textAreaTokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${textAreaTokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${textAreaTokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${textAreaTokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${textAreaTokens.labelInnerTop}: 0rem; ${textAreaTokens.labelInnerMarginBottom}: 0rem; - ${textAreaTokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); - ${textAreaTokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.inputFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.inputLineHeight}: ${bodyXS.lineHeight}; + ${textAreaTokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.helpersFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.indicatorSizeInner}: 0.375rem; ${textAreaTokens.indicatorSizeOuter}: 0.375rem; ${textAreaTokens.indicatorLabelPlacementInner}: 0 0 0 0; @@ -507,20 +555,20 @@ export const config = { ${textAreaTokens.hintInnerLabelPlacementOffset}: -0.188rem -2.188rem auto auto; ${textAreaTokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${textAreaTokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${textAreaTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${textAreaTokens.tooltipBoxShadow}: var(--shadow-down-hard-m); - ${textAreaTokens.tooltipColor}: var(--text-primary); - ${textAreaTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${textAreaTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${textAreaTokens.tooltipBoxShadow}: ${shadowDownHardM}; + ${textAreaTokens.tooltipColor}: ${textPrimary}; + ${textAreaTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -533,12 +581,12 @@ export const config = { ${textAreaTokens.tooltipMinHeight}: 2.5rem; ${textAreaTokens.tooltipBorderRadius}: 0.625rem; - ${textAreaTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${textAreaTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${textAreaTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${textAreaTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${textAreaTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${textAreaTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${textAreaTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${textAreaTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${textAreaTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${textAreaTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${textAreaTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${textAreaTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${textAreaTokens.tooltipContentLeftMargin}: 0.375rem; @@ -558,12 +606,12 @@ export const config = { ${textAreaTokens.tooltipMinHeight}: 2rem; ${textAreaTokens.tooltipBorderRadius}: 0.5rem; - ${textAreaTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${textAreaTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${textAreaTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${textAreaTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${textAreaTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${textAreaTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${textAreaTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${textAreaTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${textAreaTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${textAreaTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${textAreaTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${textAreaTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${textAreaTokens.tooltipContentLeftMargin}: 0.25rem; @@ -577,22 +625,22 @@ export const config = { }, readOnly: { true: css` - ${textAreaTokens.backgroundColorReadOnly}: var(--surface-transparent-card); - ${textAreaTokens.inputColorReadOnly}: var(--text-primary); - ${textAreaTokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${textAreaTokens.backgroundColorReadOnly}: ${surfaceTransparentCard}; + ${textAreaTokens.inputColorReadOnly}: ${textPrimary}; + ${textAreaTokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${textAreaTokens.contentSlotRightOpacityReadOnly}: 1; - ${textAreaTokens.rightContentColor}: var(--text-secondary); - ${textAreaTokens.backgroundColor}: var(--surface-transparent-card); + ${textAreaTokens.rightContentColor}: ${textSecondary}; + ${textAreaTokens.backgroundColor}: ${surfaceTransparentCard}; `, }, disabled: { true: css` ${textAreaTokens.disabledOpacity}: 1; - ${textAreaTokens.inputColorDisabled}: var(--text-secondary); - ${textAreaTokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${textAreaTokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${textAreaTokens.rightContentColor}: var(--text-secondary); - ${textAreaTokens.backgroundColor}: var(--surface-transparent-secondary); + ${textAreaTokens.inputColorDisabled}: ${textSecondary}; + ${textAreaTokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${textAreaTokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${textAreaTokens.rightContentColor}: ${textSecondary}; + ${textAreaTokens.backgroundColor}: ${surfaceTransparentSecondary}; ${textAreaTokens.borderColor}: transparent; `, }, diff --git a/packages/sdds-finai/src/components/TextField/TextField.clear.config.ts b/packages/sdds-finai/src/components/TextField/TextField.clear.config.ts index 84d684774e4..71f6d67f4f8 100644 --- a/packages/sdds-finai/src/components/TextField/TextField.clear.config.ts +++ b/packages/sdds-finai/src/components/TextField/TextField.clear.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,140 +57,140 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-positive); - ${tokens.colorFocus}: var(--text-primary); + ${tokens.color}: ${textPositive}; + ${tokens.colorFocus}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.leftHelperColorFocus}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-positive); - ${tokens.contentSlotColorHover}: var(--text-positive-hover); - ${tokens.contentSlotColorActive}: var(--text-positive-active); - ${tokens.contentSlotColorFocus}: var(--text-primary); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.leftHelperColorFocus}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPositive}; + ${tokens.contentSlotColorHover}: ${textPositiveHover}; + ${tokens.contentSlotColorActive}: ${textPositiveActive}; + ${tokens.contentSlotColorFocus}: ${textPrimary}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-warning); - ${tokens.colorFocus}: var(--text-primary); + ${tokens.color}: ${textWarning}; + ${tokens.colorFocus}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.leftHelperColorFocus}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-warning); - ${tokens.contentSlotColorHover}: var(--text-warning-hover); - ${tokens.contentSlotColorActive}: var(--text-warning-active); - ${tokens.contentSlotColorFocus}: var(--text-primary); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.leftHelperColorFocus}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textWarning}; + ${tokens.contentSlotColorHover}: ${textWarningHover}; + ${tokens.contentSlotColorActive}: ${textWarningActive}; + ${tokens.contentSlotColorFocus}: ${textPrimary}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-negative); - ${tokens.colorFocus}: var(--text-primary); + ${tokens.color}: ${textNegative}; + ${tokens.colorFocus}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - ${tokens.contentSlotColorFocus}: var(--text-primary); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + ${tokens.contentSlotColorFocus}: ${textPrimary}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -159,40 +207,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -208,19 +256,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -243,40 +291,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -291,12 +339,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -321,40 +369,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -369,12 +417,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -399,40 +447,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -447,12 +495,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -477,40 +525,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -525,12 +573,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -545,126 +593,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -677,12 +725,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -701,12 +749,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -720,23 +768,23 @@ export const config = { disabled: { true: css` ${tokens.disabledOpacity}: 1; - ${tokens.backgroundColor}: var(--surface-transparent-secondary); - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary); - ${tokens.contentSlotRightColorActive}: var(--text-secondary); + ${tokens.backgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondary}; + ${tokens.contentSlotRightColorActive}: ${textSecondary}; `, }, readOnly: { true: css` - ${tokens.colorReadOnly}: var(--text-primary); + ${tokens.colorReadOnly}: ${textPrimary}; ${tokens.backgroundColorReadOnly}: transparent; - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-tertiary); + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentTertiary}; ${tokens.contentSlotRightOpacityReadOnly}: 1; - ${tokens.contentSlotRightColor}: var(--text-secondary); + ${tokens.contentSlotRightColor}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-finai/src/components/TextField/TextField.config.ts b/packages/sdds-finai/src/components/TextField/TextField.config.ts index e0fac05826f..444ce309820 100644 --- a/packages/sdds-finai/src/components/TextField/TextField.config.ts +++ b/packages/sdds-finai/src/components/TextField/TextField.config.ts @@ -1,3 +1,63 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentNegativeHover, + outlineTransparentPositive, + outlineTransparentPositiveHover, + outlineTransparentWarning, + outlineTransparentWarningHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentCard, + surfaceTransparentCardHover, + surfaceTransparentNegative, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,135 +69,135 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-card); - ${tokens.backgroundColorHover}: var(--surface-transparent-card-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-card); - ${tokens.borderColor}: var(--outline-solid-primary); - ${tokens.borderColorHover}: var(--outline-solid-primary-hover); - ${tokens.borderColorFocus}: var(--outline-accent); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentCard}; + ${tokens.backgroundColorHover}: ${surfaceTransparentCardHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.borderColor}: ${outlineSolidPrimary}; + ${tokens.borderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.borderColorFocus}: ${outlineAccent}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-positive); - ${tokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-card); - ${tokens.borderColor}: var(--outline-transparent-positive); - ${tokens.borderColorHover}: var(--outline-transparent-positive-hover); - ${tokens.borderColorFocus}: var(--outline-accent); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.leftHelperColorFocus}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPositive}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.borderColor}: ${outlineTransparentPositive}; + ${tokens.borderColorHover}: ${outlineTransparentPositiveHover}; + ${tokens.borderColorFocus}: ${outlineAccent}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.leftHelperColorFocus}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-warning); - ${tokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-card); - ${tokens.borderColor}: var(--outline-transparent-warning); - ${tokens.borderColorHover}: var(--outline-transparent-warning-hover); - ${tokens.borderColorFocus}: var(--outline-accent); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.leftHelperColorFocus}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentWarning}; + ${tokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.borderColor}: ${outlineTransparentWarning}; + ${tokens.borderColorHover}: ${outlineTransparentWarningHover}; + ${tokens.borderColorFocus}: ${outlineAccent}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.leftHelperColorFocus}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-card); - ${tokens.borderColor}: var(--outline-transparent-negative); - ${tokens.borderColorHover}: var(--outline-transparent-negative-hover); - ${tokens.borderColorFocus}: var(--outline-accent); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.leftHelperColorFocus}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.borderColor}: ${outlineTransparentNegative}; + ${tokens.borderColorHover}: ${outlineTransparentNegativeHover}; + ${tokens.borderColorFocus}: ${outlineAccent}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.leftHelperColorFocus}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -151,40 +211,40 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -200,19 +260,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -235,20 +295,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -256,20 +316,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -282,12 +342,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -313,20 +373,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -334,20 +394,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -360,12 +420,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -391,20 +451,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -412,20 +472,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -438,12 +498,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -469,20 +529,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -490,20 +550,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -516,12 +576,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -536,126 +596,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -668,12 +728,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -692,12 +752,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -711,29 +771,29 @@ export const config = { disabled: { true: css` ${tokens.disabledOpacity}: 1; - ${tokens.backgroundColor}: var(--surface-transparent-secondary); + ${tokens.backgroundColor}: ${surfaceTransparentSecondary}; ${tokens.borderColor}: transparent; ${tokens.borderColorHover}: transparent; ${tokens.borderColorFocus}: transparent; - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary); - ${tokens.contentSlotRightColorActive}: var(--text-secondary); + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondary}; + ${tokens.contentSlotRightColorActive}: ${textSecondary}; `, }, readOnly: { true: css` - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColor}: var(--surface-transparent-card); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-card); - ${tokens.borderColorReadOnly}: var(--outline-solid-primary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary); - ${tokens.contentSlotRightColorActive}: var(--text-secondary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColor}: ${surfaceTransparentCard}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentCard}; + ${tokens.borderColorReadOnly}: ${outlineSolidPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondary}; + ${tokens.contentSlotRightColorActive}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-finai/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/sdds-finai/src/components/TextFieldGroup/TextFieldGroup.config.ts index 200d2e26ac4..d475ffb97be 100644 --- a/packages/sdds-finai/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/sdds-finai/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.textFieldDefaultRadius}: 0.75rem; @@ -77,28 +78,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -111,12 +112,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -133,28 +134,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -167,12 +168,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.textFieldSegmentedRadius}: 0.125rem; @@ -189,28 +190,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -223,12 +224,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-finai/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-finai/src/components/TimePicker/TimePicker.config.ts index bff668e4367..d9baa9f903f 100644 --- a/packages/sdds-finai/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-finai/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + outlineAccent, + outlineSolidPrimary, + outlineSolidPrimaryHover, + outlineTransparentNegative, + outlineTransparentNegativeHover, + outlineTransparentPositive, + outlineTransparentPositiveHover, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceTransparentCard, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,64 +40,64 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-card); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.borderColor}: var(--outline-solid-primary); - ${tokens.borderColorHover}: var(--outline-solid-primary-hover); - ${tokens.borderColorFocus}: var(--outline-accent); - ${tokens.borderColorError}: var(--outline-transparent-negative); - ${tokens.borderColorSuccess}: var(--outline-transparent-positive); - - ${tokens.labelColor}: var(--text-primary); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColor}: var(--outline-solid-primary); - ${tokens.textFieldBorderColorHover}: var(--outline-solid-primary-hover); - ${tokens.textFieldBorderColorFocus}: var(--outline-accent); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorError}: var(--outline-transparent-negative); - ${tokens.textFieldBorderColorErrorHover}: var(--outline-transparent-negative-hover); - ${tokens.textFieldBorderColorErrorFocus}: var(--outline-accent); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorSuccess}: var(--outline-transparent-positive); - ${tokens.textFieldBorderColorSuccessHover}: var(--outline-transparent-positive-hover); - ${tokens.textFieldBorderColorSuccessFocus}: var(--outline-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); - - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.background}: ${surfaceTransparentCard}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.borderColor}: ${outlineSolidPrimary}; + ${tokens.borderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.borderColorFocus}: ${outlineAccent}; + ${tokens.borderColorError}: ${outlineTransparentNegative}; + ${tokens.borderColorSuccess}: ${outlineTransparentPositive}; + + ${tokens.labelColor}: ${textPrimary}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.timePickerShadow}: ${shadowDownSoftS}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColor}: ${outlineSolidPrimary}; + ${tokens.textFieldBorderColorHover}: ${outlineSolidPrimaryHover}; + ${tokens.textFieldBorderColorFocus}: ${outlineAccent}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorError}: ${outlineTransparentNegative}; + ${tokens.textFieldBorderColorErrorHover}: ${outlineTransparentNegativeHover}; + ${tokens.textFieldBorderColorErrorFocus}: ${outlineAccent}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorSuccess}: ${outlineTransparentPositive}; + ${tokens.textFieldBorderColorSuccessHover}: ${outlineTransparentPositiveHover}; + ${tokens.textFieldBorderColorSuccessFocus}: ${outlineAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; + + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -83,12 +113,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -100,12 +130,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -123,34 +153,34 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.5rem; @@ -167,12 +197,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -184,12 +214,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -207,34 +237,34 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.983rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -251,12 +281,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -268,12 +298,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -291,23 +321,23 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -336,12 +366,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -353,12 +383,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -376,34 +406,34 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -412,10 +442,10 @@ export const config = { disabled: { true: css` ${tokens.disabledOpacity}: 1; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondary}; ${tokens.textFieldBorderColor}: transparent; ${tokens.borderColor}: transparent; `, @@ -480,18 +510,18 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-card); - ${tokens.labelColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBorderColorReadOnly}: var(--outline-solid-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentCard}; + ${tokens.labelColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBorderColorReadOnly}: ${outlineSolidPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-finai/src/components/Toast/Toast.config.ts b/packages/sdds-finai/src/components/Toast/Toast.config.ts index 0a36180259c..71e5c74b067 100644 --- a/packages/sdds-finai/src/components/Toast/Toast.config.ts +++ b/packages/sdds-finai/src/components/Toast/Toast.config.ts @@ -1,3 +1,15 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,64 +21,32 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.boxShadow}: var(--shadow-down-hard-s); - - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); - `, - positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.boxShadow}: var(--shadow-down-hard-s); - - ${toastTokens.contentLeftColor}: var(--text-positive); - - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); - `, - negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.boxShadow}: var(--shadow-down-hard-s); - - ${toastTokens.contentLeftColor}: var(--text-negative); - - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); - `, - info: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.boxShadow}: var(--shadow-down-hard-s); - - ${toastTokens.contentLeftColor}: var(--text-info); - - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary); + ${toastTokens.closeIconColor}: ${onDarkTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary); + ${toastTokens.closeIconColor}: ${onLightTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextSecondary}; `, }, size: { @@ -74,12 +54,12 @@ export const config = { ${toastTokens.borderRadius}: 0.75rem; ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/sdds-finai/src/components/Toolbar/Toolbar.config.ts b/packages/sdds-finai/src/components/Toolbar/Toolbar.config.ts index fbbe3de7d2b..53d1295ee44 100644 --- a/packages/sdds-finai/src/components/Toolbar/Toolbar.config.ts +++ b/packages/sdds-finai/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/sdds-finai/src/components/Tooltip/Tooltip.config.ts b/packages/sdds-finai/src/components/Tooltip/Tooltip.config.ts index 4aa12aa1ad6..6b6f6ba7792 100644 --- a/packages/sdds-finai/src/components/Tooltip/Tooltip.config.ts +++ b/packages/sdds-finai/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,10 @@ +import { + bodyS, + bodyXS, + inverseSurfaceSolidCardBrightness, + inverseTextPrimary, + surfaceSolidCardBrightness, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +23,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -30,7 +37,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -41,12 +48,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -55,16 +62,16 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--inverse-surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${inverseSurfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--inverse-text-primary); - ${tooltipTokens.arrowBackground}: var(--inverse-surface-solid-card-brightness); + ${tooltipTokens.color}: ${inverseTextPrimary}; + ${tooltipTokens.arrowBackground}: ${inverseSurfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-finai/src/components/Tree/Tree.config.ts b/packages/sdds-finai/src/components/Tree/Tree.config.ts index 48a65e621fe..4a1cdd5a962 100644 --- a/packages/sdds-finai/src/components/Tree/Tree.config.ts +++ b/packages/sdds-finai/src/components/Tree/Tree.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,23 +25,23 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundColorPrimary}: var(--surface-transparent-primary); - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundColorPrimary}: ${surfaceTransparentPrimary}; + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-accent); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfaceAccent}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -52,12 +69,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.itemHeight}: 3.5rem; @@ -83,12 +100,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.itemHeight}: 3rem; @@ -114,12 +131,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -145,12 +162,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.itemHeight}: 2rem; @@ -176,12 +193,12 @@ export const config = { ${tokens.checkboxInnerSize}: 0.875rem; ${tokens.checkboxBorderRadius}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-finai/src/components/Typography/Body.config.ts b/packages/sdds-finai/src/components/Typography/Body.config.ts index 23927fdf18c..b2e4d887b2f 100644 --- a/packages/sdds-finai/src/components/Typography/Body.config.ts +++ b/packages/sdds-finai/src/components/Typography/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-finai/src/components/Typography/Dspl.config.ts b/packages/sdds-finai/src/components/Typography/Dspl.config.ts index 3fb1245a027..af585c75e6e 100644 --- a/packages/sdds-finai/src/components/Typography/Dspl.config.ts +++ b/packages/sdds-finai/src/components/Typography/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +18,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +38,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +58,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/sdds-finai/src/components/Typography/Heading.config.ts b/packages/sdds-finai/src/components/Typography/Heading.config.ts index 77f16729129..4600eba8ba9 100644 --- a/packages/sdds-finai/src/components/Typography/Heading.config.ts +++ b/packages/sdds-finai/src/components/Typography/Heading.config.ts @@ -1,3 +1,23 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, + h6, + h6Bold, + h6Medium, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configH1 = { @@ -7,14 +27,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +46,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +65,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +84,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +103,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, @@ -102,14 +122,14 @@ export const configH6 = { variations: { size: { h6: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + ${typographyTokens.typoFontFamily}: ${h6.fontFamily}; + ${typographyTokens.typoFontSize}: ${h6.fontSize}; + ${typographyTokens.typoFontStyle}: ${h6.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h6.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h6Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h6Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h6.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h6.lineHeight}; `, }, }, diff --git a/packages/sdds-finai/src/components/Typography/Text.config.ts b/packages/sdds-finai/src/components/Typography/Text.config.ts index 542bc09a87d..da21d0af5da 100644 --- a/packages/sdds-finai/src/components/Typography/Text.config.ts +++ b/packages/sdds-finai/src/components/Typography/Text.config.ts @@ -1,3 +1,17 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +21,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +41,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +61,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +81,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, diff --git a/packages/sdds-finai/src/components/_beta/Popover/Popover.closeInner.config.ts b/packages/sdds-finai/src/components/_beta/Popover/Popover.closeInner.config.ts index 812da859101..9ef84fd7186 100644 --- a/packages/sdds-finai/src/components/_beta/Popover/Popover.closeInner.config.ts +++ b/packages/sdds-finai/src/components/_beta/Popover/Popover.closeInner.config.ts @@ -1,3 +1,14 @@ +import { + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, _beta_popoverTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,18 +19,18 @@ export const config = { variations: { view: { default: css` - ${tokens.backgroundColor}: var(--surface-solid-card); - ${tokens.boxShadow}: var(--shadow-down-hard-m); - ${tokens.iconColor}: var(--text-secondary); - ${tokens.iconColorHover}: var(--text-secondary-hover); - ${tokens.iconColorActive}: var(--text-secondary-active); + ${tokens.backgroundColor}: ${surfaceSolidCard}; + ${tokens.boxShadow}: ${shadowDownHardM}; + ${tokens.iconColor}: ${textSecondary}; + ${tokens.iconColorHover}: ${textSecondaryHover}; + ${tokens.iconColorActive}: ${textSecondaryActive}; `, info: css` - ${tokens.backgroundColor}: var(--surface-accent); - ${tokens.boxShadow}: var(--shadow-down-hard-m); - ${tokens.iconColor}: var(--on-dark-text-secondary); - ${tokens.iconColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.iconColorActive}: var(--on-dark-text-secondary-active); + ${tokens.backgroundColor}: ${surfaceAccent}; + ${tokens.boxShadow}: ${shadowDownHardM}; + ${tokens.iconColor}: ${onDarkTextSecondary}; + ${tokens.iconColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.iconColorActive}: ${onDarkTextSecondaryActive}; `, }, size: { diff --git a/packages/sdds-finai/src/components/_beta/Popover/Popover.closeNone.config.ts b/packages/sdds-finai/src/components/_beta/Popover/Popover.closeNone.config.ts index a13aa062c25..0c42bfc2f4a 100644 --- a/packages/sdds-finai/src/components/_beta/Popover/Popover.closeNone.config.ts +++ b/packages/sdds-finai/src/components/_beta/Popover/Popover.closeNone.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceAccent, surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, _beta_popoverTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,12 +9,12 @@ export const config = { variations: { view: { default: css` - ${tokens.backgroundColor}: var(--surface-solid-card); - ${tokens.boxShadow}: var(--shadow-down-hard-m); + ${tokens.backgroundColor}: ${surfaceSolidCard}; + ${tokens.boxShadow}: ${shadowDownHardM}; `, info: css` - ${tokens.backgroundColor}: var(--surface-accent); - ${tokens.boxShadow}: var(--shadow-down-hard-m); + ${tokens.backgroundColor}: ${surfaceAccent}; + ${tokens.boxShadow}: ${shadowDownHardM}; `, }, size: { diff --git a/packages/sdds-finai/src/components/_beta/Tooltip/Tooltip.config.ts b/packages/sdds-finai/src/components/_beta/Tooltip/Tooltip.config.ts index 0aefb95e1d3..432e8d08687 100644 --- a/packages/sdds-finai/src/components/_beta/Tooltip/Tooltip.config.ts +++ b/packages/sdds-finai/src/components/_beta/Tooltip/Tooltip.config.ts @@ -1,3 +1,10 @@ +import { + bodyS, + bodyXS, + inverseSurfaceSolidCardBrightness, + inverseTextPrimary, + shadowDownHardM, +} from '@salutejs/sdds-themes/tokens/sdds_finai'; import { css, _beta_tooltipTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,9 +15,9 @@ export const config = { variations: { view: { default: css` - ${tokens.backgroundColor}: var(--inverse-surface-solid-card-brightness); - ${tokens.boxShadow}: var(--shadow-down-hard-m); - ${tokens.color}: var(--inverse-text-primary); + ${tokens.backgroundColor}: ${inverseSurfaceSolidCardBrightness}; + ${tokens.boxShadow}: ${shadowDownHardM}; + ${tokens.color}: ${inverseTextPrimary}; `, }, size: { @@ -18,23 +25,23 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.padding}: 0.75rem 0.875rem; ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.5rem; ${tokens.padding}: 0.5rem 0.75rem; ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, From 00fc29e4e82245c72dc781067aedfe41f7c7adbc Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 19:20:43 +0300 Subject: [PATCH 15/24] chore(sdds-insol): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 284 ++-- .../src/components/Attach/Attach.config.ts | 899 ++++++------ .../src/components/Badge/Badge.config.ts | 148 +- .../Breadcrumbs/Breadcrumbs.config.ts | 68 +- .../src/components/Button/Button.config.ts | 322 +++-- .../ButtonGroup/ButtonGroup.config.ts | 300 ++-- .../components/Calendar/Calendar.config.ts | 453 +++--- .../Calendar/CalendarDouble.config.ts | 449 +++--- .../src/components/Card/Card.config.ts | 3 +- .../components/Carousel/Carousel.config.ts | 24 +- .../src/components/Cell/Cell.config.ts | 169 +-- .../components/Checkbox/Checkbox.config.ts | 106 +- .../components/ChipGroup/ChipGroup.config.ts | 102 +- .../components/CodeField/CodeField.config.ts | 85 +- .../src/components/Counter/Counter.config.ts | 103 +- .../DatePicker/DatePicker.clear.config.ts | 1066 +++++++------- .../DatePicker/DatePicker.config.ts | 1090 +++++++------- .../DateTimePicker/DateTimePicker.config.ts | 954 +++++++------ .../src/components/Divider/Divider.config.ts | 14 +- .../src/components/Drawer/Drawer.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 131 +- .../components/Dropzone/Dropzone.config.ts | 53 +- .../EmbedIconButton/EmbedIconButton.config.ts | 125 +- .../EmptyState/EmptyState.config.ts | 49 +- .../src/components/File/File.config.ts | 158 +- .../IconButton/IconButton.config.ts | 194 ++- .../InformationWrapper.config.ts | 295 ++-- .../LinkButton/LinkButton.config.ts | 210 +-- .../src/components/List/List.config.ts | 77 +- .../src/components/Modal/Modal.config.ts | 20 +- .../src/components/Note/Note.config.ts | 164 ++- .../Notification/Notification.config.ts | 196 +-- .../NumberInput/NumberInput.config.ts | 289 ++-- .../Pagination/Pagination.config.ts | 220 +-- .../src/components/Popover/Popover.config.ts | 5 +- .../components/Progress/Progress.config.ts | 60 +- .../ProgressBarCircular.config.ts | 146 +- .../components/Radiobox/Radiobox.config.ts | 101 +- .../components/Range/Range.clear.config.ts | 467 +++--- .../src/components/Range/Range.config.ts | 510 +++---- .../src/components/Rating/Rating.config.ts | 385 ++--- .../components/Segment/SegmentGroup.config.ts | 11 +- .../components/Segment/SegmentItem.config.ts | 177 ++- .../src/components/Select/Select.config.ts | 1267 +++++++++-------- .../Skeleton/LineSkeleton.config.ts | 108 +- .../src/components/Slider/Slider.config.ts | 235 +-- .../src/components/Spinner/Spinner.config.ts | 26 +- .../src/components/Steps/Steps.config.ts | 331 +++-- .../src/components/Switch/Switch.config.ts | 103 +- .../src/components/Table/Table.config.ts | 186 +-- .../HorizontalIconTabItem.config.ts | 71 +- .../horizontal/HorizontalTabItem.config.ts | 255 ++-- .../Tabs/horizontal/HorizontalTabs.config.ts | 36 +- .../vertical/VerticalIconTabItem.config.ts | 24 +- .../Tabs/vertical/VerticalTabItem.config.ts | 86 +- .../Tabs/vertical/VerticalTabs.config.ts | 17 +- .../TextArea/TextArea.clear.config.ts | 404 +++--- .../components/TextArea/TextArea.config.ts | 556 ++++---- .../TextField/TextField.clear.config.ts | 789 +++++----- .../components/TextField/TextField.config.ts | 880 ++++++------ .../TextFieldGroup/TextFieldGroup.config.ts | 193 +-- .../TimePicker/TimePicker.config.ts | 344 +++-- .../src/components/Toast/Toast.config.ts | 70 +- .../src/components/Toolbar/Toolbar.config.ts | 11 +- .../src/components/Tooltip/Tooltip.config.ts | 33 +- .../src/components/Tree/Tree.config.ts | 106 +- .../src/components/Typography/Body.config.ts | 97 +- .../src/components/Typography/Dspl.config.ts | 59 +- .../components/Typography/Heading.config.ts | 116 +- .../src/components/Typography/Text.config.ts | 97 +- 70 files changed, 9314 insertions(+), 7882 deletions(-) diff --git a/packages/sdds-insol/src/components/Accordion/Accordion.config.ts b/packages/sdds-insol/src/components/Accordion/Accordion.config.ts index 391fe8875ae..629c8f151c1 100644 --- a/packages/sdds-insol/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-insol/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + h2, + h3, + h4, + h5, + h6, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceSolidTertiary, + surfaceTransparentCard, + textAccent, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,14 +28,14 @@ export const config = { default: css` ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-transparent-card); - ${accordionTokens.accordionItemShadow}: var(--shadow-down-soft-s); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemOpenedTitleColor}: var(--text-accent); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceTransparentCard}; + ${accordionTokens.accordionItemShadow}: ${shadowDownSoftS}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemOpenedTitleColor}: ${textAccent}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, @@ -25,15 +43,15 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemOpenedTitleColor}: var(--text-accent); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemOpenedTitleColor}: ${textAccent}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -46,19 +64,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.875rem; ${accordionTokens.accordionGap}: 1rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -69,19 +87,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionGap}: 0.875rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -92,19 +110,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.625rem; ${accordionTokens.accordionGap}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.563rem; @@ -115,19 +133,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.5rem; ${accordionTokens.accordionGap}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.lineHeight}; `, h2: css` ${accordionTokens.accordionItemPaddingVertical}: 1.625rem; @@ -138,19 +156,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 1.25rem; ${accordionTokens.accordionGap}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h2.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 1.5rem; @@ -161,19 +179,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 1.125rem; ${accordionTokens.accordionGap}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 1.438rem; @@ -183,19 +201,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 1rem; ${accordionTokens.accordionGap}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h5: css` ${accordionTokens.accordionItemPaddingVertical}: 1.25rem; @@ -205,19 +223,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.875rem; ${accordionTokens.accordionGap}: 1.25rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h5.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h6: css` ${accordionTokens.accordionItemPaddingVertical}: 1.25rem; @@ -227,19 +245,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.875rem; ${accordionTokens.accordionGap}: 1.25rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h6.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/sdds-insol/src/components/Attach/Attach.config.ts b/packages/sdds-insol/src/components/Attach/Attach.config.ts index ffff57347e3..2040983edfe 100644 --- a/packages/sdds-insol/src/components/Attach/Attach.config.ts +++ b/packages/sdds-insol/src/components/Attach/Attach.config.ts @@ -1,3 +1,54 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,439 +61,439 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.buttonColorActive}: var(--text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.buttonColorHover}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.buttonColorActive}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.iconButtonColorHover}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.iconButtonColorActive}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary-hover); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.buttonColorActive}: var(--text-primary-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColorHover}: ${textPrimaryHover}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.buttonColorActive}: ${textPrimaryActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary-hover); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonColorActive}: var(--text-primary-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonColorActive}: ${textPrimaryActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, success: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-positive); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfacePositive}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, warning: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-warning); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceWarning}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, critical: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-negative); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceNegative}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-negative-active); - - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; + + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, dark: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, black: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, white: css` - ${attachTokens.buttonColor}: var(--on-light-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.buttonColor}: ${onLightTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -457,12 +508,12 @@ export const config = { ${attachTokens.buttonWidth}: 12.5rem; ${attachTokens.buttonPadding}: 1.5rem; ${attachTokens.buttonRadius}: 0.875rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyL.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -481,37 +532,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonHeight}: 3.5rem; ${attachTokens.iconButtonWidth}: 3.5rem; ${attachTokens.iconButtonPadding}: 1.5rem; ${attachTokens.iconButtonRadius}: 0.875rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -520,12 +571,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -547,12 +598,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -571,37 +622,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -610,12 +661,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -637,12 +688,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -661,37 +712,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -700,12 +751,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -727,12 +778,12 @@ export const config = { ${attachTokens.buttonWidth}: 10rem; ${attachTokens.buttonPadding}: 0.75rem; ${attachTokens.buttonRadius}: 0.5rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -751,37 +802,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.25rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2rem; ${attachTokens.iconButtonWidth}: 2rem; ${attachTokens.iconButtonPadding}: 0.75rem; ${attachTokens.iconButtonRadius}: 0.5rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -790,12 +841,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/sdds-insol/src/components/Badge/Badge.config.ts b/packages/sdds-insol/src/components/Badge/Badge.config.ts index 3d8e8df196e..dd8eb47215a 100644 --- a/packages/sdds-insol/src/components/Badge/Badge.config.ts +++ b/packages/sdds-insol/src/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +36,67 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -78,12 +106,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -97,12 +125,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -116,12 +144,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -135,12 +163,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -159,7 +187,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/sdds-insol/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/sdds-insol/src/components/Breadcrumbs/Breadcrumbs.config.ts index 1661a5df0e3..b5577feffe5 100644 --- a/packages/sdds-insol/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/sdds-insol/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,53 +20,53 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { l: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.5rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-l-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-l-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-l-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-l-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-l-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight}; `, m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${breadcrumbsTokens.breadcrumbsGap}: 0rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-xs-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-xs-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-xs-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-xs-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-xs-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-insol/src/components/Button/Button.config.ts b/packages/sdds-insol/src/components/Button/Button.config.ts index b4d5ca3c2c5..43b93b9e6af 100644 --- a/packages/sdds-insol/src/components/Button/Button.config.ts +++ b/packages/sdds-insol/src/components/Button/Button.config.ts @@ -1,3 +1,45 @@ +import { + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentGradient, + surfaceAccentGradientActive, + surfaceAccentGradientHover, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,116 +51,116 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, 'accent-gradient': css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent-gradient); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccentGradient}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-gradient-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-gradient-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentGradientHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentGradientActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -127,12 +169,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.75rem; ${buttonTokens.buttonRadius}: 1rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyM.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.5rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -148,12 +190,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.375rem; ${buttonTokens.buttonRadius}: 0.875rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyS.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -167,12 +209,12 @@ export const config = { lr: css` ${buttonTokens.buttonHeight}: 3.5rem; ${buttonTokens.buttonWidth}: 12.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyS.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -187,12 +229,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXS.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -206,12 +248,12 @@ export const config = { mr: css` ${buttonTokens.buttonHeight}: 3rem; ${buttonTokens.buttonWidth}: 11.25rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXS.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -226,12 +268,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXS.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -245,12 +287,12 @@ export const config = { sr: css` ${buttonTokens.buttonHeight}: 2.5rem; ${buttonTokens.buttonWidth}: 11.25rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXS.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -265,12 +307,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXS.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -284,12 +326,12 @@ export const config = { xsr: css` ${buttonTokens.buttonHeight}: 2rem; ${buttonTokens.buttonWidth}: 10rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXS.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -304,12 +346,12 @@ export const config = { ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: 0.375rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXS.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 0.75rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -328,7 +370,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/sdds-insol/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/sdds-insol/src/components/ButtonGroup/ButtonGroup.config.ts index 38cdcc186d3..f5d292d6087 100644 --- a/packages/sdds-insol/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/sdds-insol/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,124 +56,124 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, success: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; `, }, size: { @@ -136,12 +184,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 4rem; ${buttonGroupTokens.buttonPadding}: 1.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, l: css` ${buttonGroupTokens.buttonDefaultRadius}: 0.875rem; @@ -150,12 +198,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3.5rem; ${buttonGroupTokens.buttonPadding}: 1.5rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, m: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -165,12 +213,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -179,12 +227,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -193,12 +241,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -207,12 +255,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 1.5rem; ${buttonGroupTokens.buttonPadding}: 0.625rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-insol/src/components/Calendar/Calendar.config.ts b/packages/sdds-insol/src/components/Calendar/Calendar.config.ts index 9e701b5bb0e..48249a39077 100644 --- a/packages/sdds-insol/src/components/Calendar/Calendar.config.ts +++ b/packages/sdds-insol/src/components/Calendar/Calendar.config.ts @@ -1,3 +1,22 @@ +import { + bodyM, + bodyS, + bodyXS, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,37 +27,37 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -49,46 +68,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyM.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyM.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyM.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyM.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +120,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 4rem; ${calendarBaseTokens.iconButtonWidth}: 4rem; @@ -121,46 +140,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyS.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyS.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyS.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyS.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -173,13 +192,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3.5rem; ${calendarBaseTokens.iconButtonWidth}: 3.5rem; @@ -193,46 +212,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -245,13 +264,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -265,46 +284,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -317,13 +336,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -337,46 +356,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.375rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.375rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.375rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -389,13 +408,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; @@ -413,12 +432,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -427,7 +446,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -438,12 +457,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -452,7 +471,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-insol/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-insol/src/components/Calendar/CalendarDouble.config.ts index a6b0c8465fd..ccd89b8b399 100644 --- a/packages/sdds-insol/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-insol/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,22 @@ +import { + bodyM, + bodyS, + bodyXS, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +27,36 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -48,46 +67,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyM.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyM.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyM.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyM.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +119,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 4rem; ${calendarDoubleTokens.iconButtonWidth}: 4rem; @@ -120,46 +139,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyS.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyS.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyS.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyS.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -172,13 +191,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; @@ -192,46 +211,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -244,13 +263,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -264,46 +283,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.5rem 0 0.5rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -316,13 +335,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -336,46 +355,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.375rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.375rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.375rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXS.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -388,13 +407,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; @@ -412,12 +431,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -426,7 +445,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -437,12 +456,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -451,7 +470,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-insol/src/components/Card/Card.config.ts b/packages/sdds-insol/src/components/Card/Card.config.ts index 2899613fb13..84b847d92f9 100644 --- a/packages/sdds-insol/src/components/Card/Card.config.ts +++ b/packages/sdds-insol/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,7 +9,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/sdds-insol/src/components/Carousel/Carousel.config.ts b/packages/sdds-insol/src/components/Carousel/Carousel.config.ts index f3fd82e4491..1c099f13494 100644 --- a/packages/sdds-insol/src/components/Carousel/Carousel.config.ts +++ b/packages/sdds-insol/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +16,14 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary); - ${tokens.paginationDotActiveBackground}: var(--surface-solid-default); - ${tokens.controlIconButtonColor}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.controlIconButtonColorHover}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.controlIconButtonColorActive}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary}; + ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault}; + ${tokens.controlIconButtonColor}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.controlIconButtonColorHover}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.controlIconButtonColorActive}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, }, size: { diff --git a/packages/sdds-insol/src/components/Cell/Cell.config.ts b/packages/sdds-insol/src/components/Cell/Cell.config.ts index 00015751d52..2d15af34a28 100644 --- a/packages/sdds-insol/src/components/Cell/Cell.config.ts +++ b/packages/sdds-insol/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.625rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.625rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -87,26 +88,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -119,26 +120,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-insol/src/components/Checkbox/Checkbox.config.ts b/packages/sdds-insol/src/components/Checkbox/Checkbox.config.ts index 35f07a1eba0..1bd4d3ae2ab 100644 --- a/packages/sdds-insol/src/components/Checkbox/Checkbox.config.ts +++ b/packages/sdds-insol/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + outlineAccent, + outlineNegative, + outlineTransparentTertiary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -18,18 +30,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -40,18 +52,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${checkboxTokens.margin}: 0; @@ -61,39 +73,39 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.0625rem; ${checkboxTokens.contentTopOffset}: 0.0625rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyL.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, view: { accent: css` ${checkboxTokens.fillColor}: transparent; - ${checkboxTokens.iconColor}: var(--outline-accent); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.iconColor}: ${outlineAccent}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--outline-transparent-tertiary); - ${checkboxTokens.triggerBorderCheckedColor}: var(--outline-accent); + ${checkboxTokens.triggerBorderColor}: ${outlineTransparentTertiary}; + ${checkboxTokens.triggerBorderCheckedColor}: ${outlineAccent}; `, negative: css` ${checkboxTokens.fillColor}: transparent; - ${checkboxTokens.iconColor}: var(--outline-negative); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.iconColor}: ${outlineNegative}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--outline-negative); - ${checkboxTokens.triggerBorderCheckedColor}: var(--outline-negative); + ${checkboxTokens.triggerBorderColor}: ${outlineNegative}; + ${checkboxTokens.triggerBorderCheckedColor}: ${outlineNegative}; `, }, disabled: { @@ -103,7 +115,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-insol/src/components/ChipGroup/ChipGroup.config.ts b/packages/sdds-insol/src/components/ChipGroup/ChipGroup.config.ts index 2bed06ad8c0..5513edd7d66 100644 --- a/packages/sdds-insol/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/sdds-insol/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +26,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +57,12 @@ export const config = { ${tokens.chipHeight}: 3rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.5rem; @@ -60,12 +78,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -81,12 +99,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; @@ -102,12 +120,12 @@ export const config = { ${tokens.chipHeight}: 1.5rem; ${tokens.chipPadding}: 0 0.625rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/sdds-insol/src/components/CodeField/CodeField.config.ts b/packages/sdds-insol/src/components/CodeField/CodeField.config.ts index d0109404d66..a6b14975925 100644 --- a/packages/sdds-insol/src/components/CodeField/CodeField.config.ts +++ b/packages/sdds-insol/src/components/CodeField/CodeField.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodyXS, + outlineAccent, + surfaceAccent, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, codeFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,19 +26,19 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--surface-accent); + ${tokens.caretColor}: ${surfaceAccent}; - ${tokens.captionColor}: var(--text-secondary); - ${tokens.captionColorError}: var(--text-negative); + ${tokens.captionColor}: ${textSecondary}; + ${tokens.captionColorError}: ${textNegative}; - ${tokens.codeColor}: var(--text-primary); - ${tokens.codeColorError}: var(--text-negative); - ${tokens.borderColorFocus}: var(--outline-accent); + ${tokens.codeColor}: ${textPrimary}; + ${tokens.codeColorError}: ${textNegative}; + ${tokens.borderColorFocus}: ${outlineAccent}; - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; `, }, size: { @@ -34,19 +51,19 @@ export const config = { ${tokens.codeItemWidth}: 2.75rem; ${tokens.codeItemHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.captionFontFamily}: ${bodyS.fontFamily}; + ${tokens.captionFontSize}: ${bodyS.fontSize}; + ${tokens.captionFontStyle}: ${bodyS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyS.lineHeight}; ${tokens.borderRadius}: 0.875rem; ${tokens.borderRadiusSegmented}: 0.375rem; @@ -61,19 +78,19 @@ export const config = { ${tokens.codeItemWidth}: 2.375rem; ${tokens.codeItemHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.captionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.captionFontSize}: ${bodyXS.fontSize}; + ${tokens.captionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyXS.lineHeight}; ${tokens.borderRadius}: 0.75rem; ${tokens.borderRadiusSegmented}: 0.25rem; diff --git a/packages/sdds-insol/src/components/Counter/Counter.config.ts b/packages/sdds-insol/src/components/Counter/Counter.config.ts index 140aa43a57f..7fc4476f82d 100644 --- a/packages/sdds-insol/src/components/Counter/Counter.config.ts +++ b/packages/sdds-insol/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,32 +23,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -41,56 +56,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-insol/src/components/DatePicker/DatePicker.clear.config.ts b/packages/sdds-insol/src/components/DatePicker/DatePicker.clear.config.ts index 3855f4b573e..e4a0ef8bf96 100644 --- a/packages/sdds-insol/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/sdds-insol/src/components/DatePicker/DatePicker.clear.config.ts @@ -1,3 +1,41 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodyXS, + bodyXXS, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,64 +46,64 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); + ${tokens.outlineFocusColor}: ${surfaceAccent}; ${tokens.background}: transparent; ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.focusColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.focusColor}: ${textAccent}; ${tokens.textFieldBackgroundColor}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -74,76 +112,76 @@ export const config = { ${tokens.textFieldBackgroundSuccessColor}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -152,12 +190,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -167,24 +205,24 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.938rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 2.25rem; ${tokens.embedIconButtonPadding}: 0 0 0.75rem; ${tokens.embedIconButtonRadius}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -210,30 +248,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.8125rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.375rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -251,46 +289,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -302,25 +340,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 1.25rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -331,12 +369,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -346,12 +384,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -382,30 +420,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -423,46 +461,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyS.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyS.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyS.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyS.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -474,25 +512,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 1.188rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -503,12 +541,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -518,24 +556,24 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; ${tokens.embedIconButtonPadding}: 0 0 0.875rem; ${tokens.embedIconButtonRadius}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -561,30 +599,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -602,46 +640,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.375rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -653,25 +691,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 0.75rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -682,12 +720,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -697,24 +735,24 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; ${tokens.embedIconButtonPadding}: 0 0 0.75rem; ${tokens.embedIconButtonRadius}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.375rem; @@ -740,30 +778,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.813rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -781,46 +819,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -832,25 +870,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.75rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.813rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -861,12 +899,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -876,12 +914,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -912,30 +950,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -953,46 +991,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.375rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.375rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.375rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.375rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -1004,25 +1042,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -1039,12 +1077,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1053,7 +1091,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1064,12 +1102,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1078,15 +1116,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1099,12 +1137,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1123,12 +1161,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1147,15 +1185,15 @@ export const config = { readOnly: { true: css` ${tokens.backgroundReadOnly}: transparent; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-insol/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-insol/src/components/DatePicker/DatePicker.config.ts index 00bed4a5ca6..4f73a9a9c20 100644 --- a/packages/sdds-insol/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-insol/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + outlineClear, + outlineNegativeMinor, + outlineNegativeMinorActive, + outlineNegativeMinorHover, + outlinePositiveMinor, + outlinePositiveMinorActive, + outlinePositiveMinorHover, + outlineSolidSecondary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidSecondary, + surfaceTransparentCard, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,120 +50,120 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-card); - ${tokens.backgroundError}: var(--surface-transparent-card); - ${tokens.backgroundSuccess}: var(--surface-transparent-card); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-primary); - ${tokens.textFieldContentSlotColorHover}: var(--text-primary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-primary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightOpacityReadOnly}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBorderColorFocus}: var(--outline-solid-secondary); - ${tokens.textFieldBorderColorHover}: var(--outline-clear); - - ${tokens.borderColorFocus}: var(--outline-solid-secondary); - - ${tokens.borderColorSuccess}: var(--outline-positive-minor); - ${tokens.textFieldBorderColorSuccess}: var(--outline-positive-minor); - ${tokens.textFieldBorderColorSuccessFocus}: var(--outline-positive-minor-active); - ${tokens.textFieldBorderColorSuccessHover}: var(--outline-positive-minor-hover); - - ${tokens.borderColorError}: var(--outline-negative-minor); - ${tokens.textFieldBorderColorError}: var(--outline-negative-minor); - ${tokens.textFieldBorderColorErrorFocus}: var(--outline-negative-minor-active); - ${tokens.textFieldBorderColorErrorHover}: var(--outline-negative-minor-hover); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-clear); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-clear); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-clear); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentCard}; + ${tokens.backgroundError}: ${surfaceTransparentCard}; + ${tokens.backgroundSuccess}: ${surfaceTransparentCard}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textPrimary}; + ${tokens.textFieldContentSlotColorHover}: ${textPrimaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textPrimaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightOpacityReadOnly}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBorderColorFocus}: ${outlineSolidSecondary}; + ${tokens.textFieldBorderColorHover}: ${outlineClear}; + + ${tokens.borderColorFocus}: ${outlineSolidSecondary}; + + ${tokens.borderColorSuccess}: ${outlinePositiveMinor}; + ${tokens.textFieldBorderColorSuccess}: ${outlinePositiveMinor}; + ${tokens.textFieldBorderColorSuccessFocus}: ${outlinePositiveMinorActive}; + ${tokens.textFieldBorderColorSuccessHover}: ${outlinePositiveMinorHover}; + + ${tokens.borderColorError}: ${outlineNegativeMinor}; + ${tokens.textFieldBorderColorError}: ${outlineNegativeMinor}; + ${tokens.textFieldBorderColorErrorFocus}: ${outlineNegativeMinorActive}; + ${tokens.textFieldBorderColorErrorHover}: ${outlineNegativeMinorHover}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceClear}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceClear}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -131,12 +173,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -146,24 +188,24 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.938rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 4rem; ${tokens.embedIconButtonPadding}: 1.25rem; ${tokens.embedIconButtonRadius}: 1rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -187,31 +229,31 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldPadding}: 1.375rem 1.25rem 1.375rem 1.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.6255rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; @@ -229,46 +271,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.875rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyM.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.875rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyM.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyM.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.875rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyM.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -281,25 +323,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -311,12 +353,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -326,24 +368,24 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; ${tokens.embedIconButtonPadding}: 1rem; ${tokens.embedIconButtonRadius}: 0.875rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -368,31 +410,31 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.625rem -0.0625rem 0rem; ${tokens.textFieldRightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; @@ -410,46 +452,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyS.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyS.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyS.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyS.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -462,25 +504,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.188rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -492,12 +534,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -507,24 +549,24 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; ${tokens.embedIconButtonPadding}: 0.75rem; ${tokens.embedIconButtonRadius}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -549,31 +591,31 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.625rem -0.125rem 0rem; ${tokens.textFieldRightContentMargin}: -0.125rem 0rem -0.125rem 0.75rem; @@ -591,46 +633,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -643,25 +685,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -673,12 +715,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -688,24 +730,24 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; ${tokens.embedIconButtonPadding}: 0.5rem; ${tokens.embedIconButtonRadius}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.375rem; @@ -730,31 +772,31 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldPadding}: 0.813rem 0.75rem 0.813rem 0.75rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.5rem -0.1875rem 0rem; ${tokens.textFieldRightContentMargin}: -0.1875rem 0rem -0.1875rem 0.75rem; @@ -772,46 +814,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -824,25 +866,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.813rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -854,12 +896,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -869,12 +911,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -904,31 +946,31 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldPadding}: 0.5rem 0.625rem 0.5rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.375rem -0.0625rem 0rem; ${tokens.textFieldRightContentMargin}: -0.0625rem 0rem -0.0625rem 0.625rem; @@ -946,46 +988,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXS.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -998,25 +1040,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -1033,12 +1075,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1047,7 +1089,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1058,12 +1100,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1072,15 +1114,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1093,12 +1135,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1117,12 +1159,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1140,16 +1182,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-solid-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceSolidSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-secondary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceSolidSecondary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-insol/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/sdds-insol/src/components/DateTimePicker/DateTimePicker.config.ts index d2ce52a941a..3690f441690 100644 --- a/packages/sdds-insol/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/sdds-insol/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,47 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + bodyXXS, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + outlineClear, + outlineNegativeMinor, + outlineNegativeMinorActive, + outlineNegativeMinorHover, + outlinePositiveMinor, + outlinePositiveMinorActive, + outlinePositiveMinorHover, + outlineSolidSecondary, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidSecondary, + surfaceTransparentCard, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,90 +54,90 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-primary); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightOpacityReadOnly}: var(--text-secondary-active); - - ${tokens.textFieldBorderColor}: var(--outline-clear); - ${tokens.textFieldBorderColorFocus}: var(--outline-solid-secondary); - ${tokens.textFieldBorderColorHover}: var(--outline-clear); - ${tokens.textFieldBorderColorSuccess}: var(--outline-positive-minor); - ${tokens.textFieldBorderColorSuccessFocus}: var(--outline-positive-minor-active); - ${tokens.textFieldBorderColorSuccessHover}: var(--outline-positive-minor-hover); - ${tokens.textFieldBorderColorError}: var(--outline-negative-minor); - ${tokens.textFieldBorderColorErrorFocus}: var(--outline-negative-minor-active); - ${tokens.textFieldBorderColorErrorHover}: var(--outline-negative-minor-hover); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-clear); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-clear); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-clear); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textPrimary}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightOpacityReadOnly}: ${textSecondaryActive}; + + ${tokens.textFieldBorderColor}: ${outlineClear}; + ${tokens.textFieldBorderColorFocus}: ${outlineSolidSecondary}; + ${tokens.textFieldBorderColorHover}: ${outlineClear}; + ${tokens.textFieldBorderColorSuccess}: ${outlinePositiveMinor}; + ${tokens.textFieldBorderColorSuccessFocus}: ${outlinePositiveMinorActive}; + ${tokens.textFieldBorderColorSuccessHover}: ${outlinePositiveMinorHover}; + ${tokens.textFieldBorderColorError}: ${outlineNegativeMinor}; + ${tokens.textFieldBorderColorErrorFocus}: ${outlineNegativeMinorActive}; + ${tokens.textFieldBorderColorErrorHover}: ${outlineNegativeMinorHover}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceClear}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceClear}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -113,30 +157,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.938rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -146,12 +190,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -168,46 +212,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -219,13 +263,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; @@ -238,21 +282,21 @@ export const config = { ${tokens.timePickerItemHeight}: 4rem; ${tokens.timePickerItemBorderRadius}: 0.875rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyM.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyM.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyM.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 1.375rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -274,30 +318,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -307,12 +351,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -329,46 +373,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -380,13 +424,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; @@ -399,21 +443,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3.5rem; ${tokens.timePickerItemBorderRadius}: 0.75rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 1.188rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -435,30 +479,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -468,12 +512,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -490,46 +534,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -541,13 +585,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; @@ -560,21 +604,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3rem; ${tokens.timePickerItemBorderRadius}: 0.625rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -596,30 +640,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -629,12 +673,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -651,46 +695,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -702,13 +746,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -721,21 +765,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.813rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -756,30 +800,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -789,12 +833,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -811,46 +855,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.375rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.375rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.375rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.375rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -862,13 +906,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -881,21 +925,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -970,12 +1014,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -984,7 +1028,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -995,12 +1039,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1009,7 +1053,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -1019,12 +1063,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-secondary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceSolidSecondary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; `, diff --git a/packages/sdds-insol/src/components/Divider/Divider.config.ts b/packages/sdds-insol/src/components/Divider/Divider.config.ts index df0449d5c06..60ad2d425af 100644 --- a/packages/sdds-insol/src/components/Divider/Divider.config.ts +++ b/packages/sdds-insol/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/sdds-insol/src/components/Drawer/Drawer.config.ts b/packages/sdds-insol/src/components/Drawer/Drawer.config.ts index b0b00b15040..90516b1c407 100644 --- a/packages/sdds-insol/src/components/Drawer/Drawer.config.ts +++ b/packages/sdds-insol/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/sdds-insol/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-insol/src/components/Dropdown/Dropdown.config.ts index b08a7664412..9684948ad51 100644 --- a/packages/sdds-insol/src/components/Dropdown/Dropdown.config.ts +++ b/packages/sdds-insol/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,10 @@ +import { + bodyM, + bodyS, + bodyXS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -25,12 +32,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.itemDisclosureIconSize}: 1.5rem; ${tokens.cellPadding}: 0rem; @@ -39,12 +46,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, l: css` ${tokens.padding}: 0.125rem; @@ -64,12 +71,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.itemDisclosureIconSize}: 1.5rem; ${tokens.cellPadding}: 0rem; @@ -78,12 +85,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, m: css` ${tokens.padding}: 0.125rem; @@ -103,12 +110,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemDisclosureIconSize}: 1.25rem; ${tokens.cellPadding}: 0rem; @@ -117,12 +124,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.padding}: 0.125rem; @@ -142,12 +149,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemDisclosureIconSize}: 1rem; ${tokens.cellPadding}: 0rem; @@ -156,12 +163,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.padding}: 0.125rem; @@ -181,12 +188,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.125rem; ${tokens.dividerMarginBottomTight}: 0.125rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemDisclosureIconSize}: 1rem; ${tokens.cellPadding}: 0rem; @@ -195,18 +202,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/sdds-insol/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-insol/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..11457d28465 100644 --- a/packages/sdds-insol/src/components/Dropzone/Dropzone.config.ts +++ b/packages/sdds-insol/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-insol/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/sdds-insol/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..542c6851e7e 100644 --- a/packages/sdds-insol/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/sdds-insol/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-insol/src/components/EmptyState/EmptyState.config.ts b/packages/sdds-insol/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..306f2307ee9 100644 --- a/packages/sdds-insol/src/components/EmptyState/EmptyState.config.ts +++ b/packages/sdds-insol/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-insol/src/components/File/File.config.ts b/packages/sdds-insol/src/components/File/File.config.ts index 455a87f891b..535e7d53215 100644 --- a/packages/sdds-insol/src/components/File/File.config.ts +++ b/packages/sdds-insol/src/components/File/File.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, fileTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +24,36 @@ export const config = { variations: { view: { default: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-secondary); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textSecondary}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-solid-default); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; `, negative: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-negative); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textNegative}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-negative); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceNegative}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-negative); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceNegative}; `, }, size: { @@ -52,19 +68,19 @@ export const config = { ${tokens.cellGap}: 0.75rem; ${tokens.cellPaddingRightContent}: 0.75rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -94,19 +110,19 @@ export const config = { ${tokens.cellGap}: 0.625rem; ${tokens.cellPaddingRightContent}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -136,19 +152,19 @@ export const config = { ${tokens.cellGap}: 0.5rem; ${tokens.cellPaddingRightContent}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -178,19 +194,19 @@ export const config = { ${tokens.cellGap}: 0.375rem; ${tokens.cellPaddingRightContent}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 24; ${tokens.progressBarCircularHeight}: 1.5rem; diff --git a/packages/sdds-insol/src/components/IconButton/IconButton.config.ts b/packages/sdds-insol/src/components/IconButton/IconButton.config.ts index 9e335f72567..e0686832769 100644 --- a/packages/sdds-insol/src/components/IconButton/IconButton.config.ts +++ b/packages/sdds-insol/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,74 +49,74 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -85,12 +125,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 4rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 1rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -100,12 +140,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.875rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -115,12 +155,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -130,12 +170,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -145,12 +185,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.5rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -160,12 +200,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 1.5rem; ${iconButtonTokens.iconButtonPadding}: 0.375rem; ${iconButtonTokens.iconButtonRadius}: 0.375rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 0.75rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -178,7 +218,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-insol/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/sdds-insol/src/components/InformationWrapper/InformationWrapper.config.ts index 45b90809f49..e3f351e9ec9 100644 --- a/packages/sdds-insol/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/sdds-insol/src/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,18 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,50 +23,50 @@ export const config = { variations: { view: { default: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { l: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; @@ -63,29 +78,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -95,12 +110,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, m: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; @@ -112,29 +127,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -144,12 +159,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, s: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -161,29 +176,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -193,12 +208,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, xs: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; @@ -210,29 +225,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -244,10 +259,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -260,12 +275,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -284,12 +299,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; diff --git a/packages/sdds-insol/src/components/LinkButton/LinkButton.config.ts b/packages/sdds-insol/src/components/LinkButton/LinkButton.config.ts index 65d6cd4557f..258dbc8b5aa 100644 --- a/packages/sdds-insol/src/components/LinkButton/LinkButton.config.ts +++ b/packages/sdds-insol/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +38,70 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, }, size: { @@ -79,12 +109,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 4rem; ${linkButtonTokens.linkButtonPadding}: 1.25rem 0; ${linkButtonTokens.linkButtonRadius}: 1rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.5rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -98,12 +128,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3.5rem; ${linkButtonTokens.linkButtonPadding}: 1rem 0; ${linkButtonTokens.linkButtonRadius}: 0.875rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -117,12 +147,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -136,12 +166,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -155,12 +185,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -174,12 +204,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 1.5rem; ${linkButtonTokens.linkButtonPadding}: 0.375rem 0; ${linkButtonTokens.linkButtonRadius}: 0.375rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 0.75rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/sdds-insol/src/components/List/List.config.ts b/packages/sdds-insol/src/components/List/List.config.ts index b0a7acc37b0..c32f483f4b3 100644 --- a/packages/sdds-insol/src/components/List/List.config.ts +++ b/packages/sdds-insol/src/components/List/List.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +17,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +38,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${listTokens.listItemFontFamily}: ${bodyXS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyXS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyXS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyXS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${listTokens.listItemPaddingTop}: 0.689rem; @@ -46,12 +55,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -63,12 +72,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -80,12 +89,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, xl: css` ${listTokens.listItemPaddingTop}: 1.3125rem; @@ -97,12 +106,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-insol/src/components/Modal/Modal.config.ts b/packages/sdds-insol/src/components/Modal/Modal.config.ts index 8b107b98ea3..1bda1060cf1 100644 --- a/packages/sdds-insol/src/components/Modal/Modal.config.ts +++ b/packages/sdds-insol/src/components/Modal/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,16 +16,16 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-insol/src/components/Note/Note.config.ts b/packages/sdds-insol/src/components/Note/Note.config.ts index 76e6e79ff13..9285acc4359 100644 --- a/packages/sdds-insol/src/components/Note/Note.config.ts +++ b/packages/sdds-insol/src/components/Note/Note.config.ts @@ -1,3 +1,25 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textL, + textLBold, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textSecondary, + textSecondaryHover, + textWarning, + textXS, + textXSBold, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +30,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -44,8 +66,8 @@ export const config = { ${tokens.closeIconTop}: 1rem; ${tokens.closeIconRight}: 1rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -53,20 +75,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 2rem; ${tokens.fixedContentBeforePadding}: 0.25rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.titleFontFamily}: ${textL.fontFamily}; + ${tokens.titleFontSize}: ${textL.fontSize}; + ${tokens.titleFontStyle}: ${textL.fontStyle}; + ${tokens.titleFontWeight}: ${textLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textL.letterSpacing}; + ${tokens.titleLineHeight}: ${textL.lineHeight}; ${tokens.titlePaddingRight}: 1.875rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.textFontFamily}: ${textL.fontFamily}; + ${tokens.textFontSize}: ${textL.fontSize}; + ${tokens.textFontStyle}: ${textL.fontStyle}; + ${tokens.textFontWeight}: ${textL.fontWeight}; + ${tokens.textLetterSpacing}: ${textL.letterSpacing}; + ${tokens.textLineHeight}: ${textL.lineHeight}; `, m: css` ${tokens.padding}: 1.25rem 1.5rem; @@ -78,8 +100,8 @@ export const config = { ${tokens.closeIconTop}: 0.75rem; ${tokens.closeIconRight}: 0.75rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -87,20 +109,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; ${tokens.titlePaddingRight}: 1.75rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -112,8 +134,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -121,20 +143,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.titleFontFamily}: ${textS.fontFamily}; + ${tokens.titleFontSize}: ${textS.fontSize}; + ${tokens.titleFontStyle}: ${textS.fontStyle}; + ${tokens.titleFontWeight}: ${textSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; + ${tokens.titleLineHeight}: ${textS.lineHeight}; ${tokens.titlePaddingRight}: 1.625rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.textFontFamily}: ${textS.fontFamily}; + ${tokens.textFontSize}: ${textS.fontSize}; + ${tokens.textFontStyle}: ${textS.fontStyle}; + ${tokens.textFontWeight}: ${textS.fontWeight}; + ${tokens.textLetterSpacing}: ${textS.letterSpacing}; + ${tokens.textLineHeight}: ${textS.lineHeight}; `, xs: css` ${tokens.padding}: 0.75rem 1rem; @@ -146,8 +168,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1rem; ${tokens.closeIconButtonSize}: 1rem; @@ -155,20 +177,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.titleFontFamily}: ${textXS.fontFamily}; + ${tokens.titleFontSize}: ${textXS.fontSize}; + ${tokens.titleFontStyle}: ${textXS.fontStyle}; + ${tokens.titleFontWeight}: ${textXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.titleLineHeight}: ${textXS.lineHeight}; ${tokens.titlePaddingRight}: 1.5rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.textFontFamily}: ${textXS.fontFamily}; + ${tokens.textFontSize}: ${textXS.fontSize}; + ${tokens.textFontStyle}: ${textXS.fontStyle}; + ${tokens.textFontWeight}: ${textXS.fontWeight}; + ${tokens.textLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.textLineHeight}: ${textXS.lineHeight}; `, }, }, diff --git a/packages/sdds-insol/src/components/Notification/Notification.config.ts b/packages/sdds-insol/src/components/Notification/Notification.config.ts index 3963e77e1e2..57d25fa0b1e 100644 --- a/packages/sdds-insol/src/components/Notification/Notification.config.ts +++ b/packages/sdds-insol/src/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +20,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +52,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +106,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +160,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +214,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +268,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/sdds-insol/src/components/NumberInput/NumberInput.config.ts b/packages/sdds-insol/src/components/NumberInput/NumberInput.config.ts index e55e70fd713..91eb3828940 100644 --- a/packages/sdds-insol/src/components/NumberInput/NumberInput.config.ts +++ b/packages/sdds-insol/src/components/NumberInput/NumberInput.config.ts @@ -1,3 +1,40 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseSurfaceTransparentSecondary, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextTertiary, + onDarkSurfaceTransparentSecondary, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextTertiary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,26 +47,26 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-solid-default); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${inverseSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceSolidDefault}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -37,26 +74,26 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, secondary: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.iconButtonColorSolidActive}: var(--text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -64,27 +101,27 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, accent: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--inverse-text-primary); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--on-dark-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--on-dark-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-accent); - - ${tokens.iconButtonColor}: var(--on-dark-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-accent); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${inverseTextPrimary}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${onDarkTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${onDarkTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${onDarkSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceAccent}; + + ${tokens.iconButtonColor}: ${onDarkTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${onDarkTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${onDarkTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -92,25 +129,25 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, clear: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; ${tokens.backgroundColorSolid}: transparent; - ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonColor}: ${textPrimary}; ${tokens.iconButtonBackgroundColor}: transparent; - ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; ${tokens.iconButtonBackgroundColorHover}: transparent; - ${tokens.iconButtonColorActive}: var(--text-primary-active); + ${tokens.iconButtonColorActive}: ${textPrimaryActive}; ${tokens.iconButtonBackgroundColorActive}: transparent; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -125,12 +162,12 @@ export const config = { ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${tokens.iconButtonRadius}: 0.875rem; ${tokens.iconButtonSegmentationRadius}: 0.375rem; @@ -140,12 +177,12 @@ export const config = { ${tokens.textWrapperHeight}: 3.5rem; ${tokens.textWrapperPadding}: 1.063rem 1.125rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -157,12 +194,12 @@ export const config = { ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -172,12 +209,12 @@ export const config = { ${tokens.textWrapperHeight}: 3rem; ${tokens.textWrapperPadding}: 0.875rem 1rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -189,12 +226,12 @@ export const config = { ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 1rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.625rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -204,12 +241,12 @@ export const config = { ${tokens.textWrapperHeight}: 2.5rem; ${tokens.textWrapperPadding}: 0.688rem 0.875rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -221,12 +258,12 @@ export const config = { ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.75rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${tokens.iconButtonRadius}: 0.5rem; ${tokens.iconButtonSegmentationRadius}: 0.125rem; @@ -236,12 +273,12 @@ export const config = { ${tokens.textWrapperHeight}: 2rem; ${tokens.textWrapperPadding}: 0.563rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -257,8 +294,8 @@ export const config = { }, inputBackgroundType: { fill: css` - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimary}; `, clear: css` ${tokens.backgroundColor}: transparent; diff --git a/packages/sdds-insol/src/components/Pagination/Pagination.config.ts b/packages/sdds-insol/src/components/Pagination/Pagination.config.ts index 5b9af725836..8cbb7b8c3a4 100644 --- a/packages/sdds-insol/src/components/Pagination/Pagination.config.ts +++ b/packages/sdds-insol/src/components/Pagination/Pagination.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,129 +39,129 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; ${paginationTokens.inputBorderColor}:transparent; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, }, size: { l: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-l-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-l-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-l-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-l-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyL.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyL.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyL.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyLBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyL.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyL.lineHeight}; ${paginationTokens.buttonHeight}: 3.5rem; ${paginationTokens.buttonWidth}: 3rem; @@ -167,12 +197,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, m: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; @@ -208,12 +238,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; @@ -249,12 +279,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, xs: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-xs-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-xs-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-xs-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyXS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyXS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyXS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyXSBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyXS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyXS.lineHeight}; ${paginationTokens.buttonHeight}: 2rem; ${paginationTokens.paginationInputWidth}: 2.5rem; diff --git a/packages/sdds-insol/src/components/Popover/Popover.config.ts b/packages/sdds-insol/src/components/Popover/Popover.config.ts index 2f9acaf14e8..2cd424d92ae 100644 --- a/packages/sdds-insol/src/components/Popover/Popover.config.ts +++ b/packages/sdds-insol/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/sdds-insol/src/components/Progress/Progress.config.ts b/packages/sdds-insol/src/components/Progress/Progress.config.ts index c81cf38a298..631fef5486f 100644 --- a/packages/sdds-insol/src/components/Progress/Progress.config.ts +++ b/packages/sdds-insol/src/components/Progress/Progress.config.ts @@ -1,3 +1,15 @@ +import { + surfaceAccent, + surfaceAccentGradient, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,44 +20,44 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, primary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, info: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-info); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceInfo}; + ${progressTokens.valueColor}: ${textTertiary}; `, success: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, error: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/sdds-insol/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/sdds-insol/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index 6a6449f99a4..c1b3f11d8b6 100644 --- a/packages/sdds-insol/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/sdds-insol/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +70,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -63,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -76,12 +96,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -89,12 +109,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -102,12 +122,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -115,12 +135,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -128,12 +148,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-insol/src/components/Radiobox/Radiobox.config.ts b/packages/sdds-insol/src/components/Radiobox/Radiobox.config.ts index 56d3d0ba009..5c77afa5a74 100644 --- a/packages/sdds-insol/src/components/Radiobox/Radiobox.config.ts +++ b/packages/sdds-insol/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,14 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + outlineAccent, + outlineNegative, + outlineTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,18 +32,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,18 +55,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${radioboxTokens.margin}: 0; @@ -66,19 +77,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.625rem; ${radioboxTokens.contentTopOffset}: 0.0625rem; ${radioboxTokens.contentLeftOffset}: 0.75rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyL.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -87,19 +98,19 @@ export const config = { view: { accent: css` ${radioboxTokens.fillColor}: transparent; - ${radioboxTokens.ellipseColor}: var(--outline-accent); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.ellipseColor}: ${outlineAccent}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--outline-transparent-tertiary); - ${radioboxTokens.triggerBorderCheckedColor}: var(--outline-accent); + ${radioboxTokens.triggerBorderColor}: ${outlineTransparentTertiary}; + ${radioboxTokens.triggerBorderCheckedColor}: ${outlineAccent}; `, negative: css` ${radioboxTokens.fillColor}: transparent; - ${radioboxTokens.ellipseColor}: var(--outline-negative); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.ellipseColor}: ${outlineNegative}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--outline-negative); - ${radioboxTokens.triggerBorderCheckedColor}: var(--outline-negative); + ${radioboxTokens.triggerBorderColor}: ${outlineNegative}; + ${radioboxTokens.triggerBorderCheckedColor}: ${outlineNegative}; `, }, disabled: { @@ -109,7 +120,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-insol/src/components/Range/Range.clear.config.ts b/packages/sdds-insol/src/components/Range/Range.clear.config.ts index 4fa9ce5bb13..76bdac416fb 100644 --- a/packages/sdds-insol/src/components/Range/Range.clear.config.ts +++ b/packages/sdds-insol/src/components/Range/Range.clear.config.ts @@ -1,3 +1,32 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -14,58 +43,58 @@ export const config = { ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldBackgroundColorFocus}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -73,15 +102,15 @@ export const config = { ${tokens.textFieldBackgroundSuccessColor}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; `, }, size: { @@ -89,12 +118,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.5rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-bold-bold-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -102,24 +131,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.375rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -137,22 +166,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -166,12 +195,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodySBold.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -179,24 +208,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.188rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -214,22 +243,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -243,12 +272,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -256,24 +285,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 1.063rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -291,22 +320,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -320,12 +349,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -333,24 +362,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.813rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -368,22 +397,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -397,12 +426,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -410,24 +439,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -445,22 +474,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -473,10 +502,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -489,12 +518,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -513,12 +542,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -537,16 +566,16 @@ export const config = { readOnly: { true: css` ${tokens.backgroundReadOnly}: transparent; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-insol/src/components/Range/Range.config.ts b/packages/sdds-insol/src/components/Range/Range.config.ts index 132b6435055..15c55640c19 100644 --- a/packages/sdds-insol/src/components/Range/Range.config.ts +++ b/packages/sdds-insol/src/components/Range/Range.config.ts @@ -1,3 +1,37 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + outlineClear, + outlineNegativeMinor, + outlineNegativeMinorActive, + outlineNegativeMinorHover, + outlinePositiveMinor, + outlinePositiveMinorActive, + outlinePositiveMinorHover, + outlineSolidSecondary, + shadowDownHardM, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidSecondary, + surfaceTransparentCard, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,72 +42,72 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-card); - ${tokens.shadow}: var(--shadow-down-soft-s); - ${tokens.backgroundError}: var(--surface-transparent-card); - ${tokens.backgroundSuccess}: var(--surface-transparent-card); - - ${tokens.borderColor}: var(--outline-clear); - ${tokens.textFieldBorderColorFocus}: var(--outline-solid-secondary); - ${tokens.textFieldBorderColorHover}: var(--outline-clear); - - ${tokens.borderColorSuccess}: var(--outline-positive-minor); - ${tokens.textFieldBorderColorSuccess}: var(--outline-positive-minor); - ${tokens.textFieldBorderColorSuccessFocus}: var(--outline-positive-minor-active); - ${tokens.textFieldBorderColorSuccessHover}: var(--outline-positive-minor-hover); - - ${tokens.borderColorError}: var(--outline-negative-minor); - ${tokens.textFieldBorderColorError}: var(--outline-negative-minor); - ${tokens.textFieldBorderColorErrorFocus}: var(--outline-negative-minor-active); - ${tokens.textFieldBorderColorErrorHover}: var(--outline-negative-minor-hover); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-clear); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-clear); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-clear); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceTransparentCard}; + ${tokens.shadow}: ${shadowDownSoftS}; + ${tokens.backgroundError}: ${surfaceTransparentCard}; + ${tokens.backgroundSuccess}: ${surfaceTransparentCard}; + + ${tokens.borderColor}: ${outlineClear}; + ${tokens.textFieldBorderColorFocus}: ${outlineSolidSecondary}; + ${tokens.textFieldBorderColorHover}: ${outlineClear}; + + ${tokens.borderColorSuccess}: ${outlinePositiveMinor}; + ${tokens.textFieldBorderColorSuccess}: ${outlinePositiveMinor}; + ${tokens.textFieldBorderColorSuccessFocus}: ${outlinePositiveMinorActive}; + ${tokens.textFieldBorderColorSuccessHover}: ${outlinePositiveMinorHover}; + + ${tokens.borderColorError}: ${outlineNegativeMinor}; + ${tokens.textFieldBorderColorError}: ${outlineNegativeMinor}; + ${tokens.textFieldBorderColorErrorFocus}: ${outlineNegativeMinorActive}; + ${tokens.textFieldBorderColorErrorHover}: ${outlineNegativeMinorHover}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColorFocus}: ${surfaceClear}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceClear}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceClear}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -82,12 +116,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-bold-bold-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -96,24 +130,24 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.375rem 1.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 4rem; @@ -131,22 +165,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -160,12 +194,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodySBold.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -174,24 +208,24 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.188rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -209,22 +243,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -238,12 +272,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -252,24 +286,24 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 1.063rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -287,22 +321,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -316,12 +350,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -330,24 +364,24 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.813rem 0.75rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -365,22 +399,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -394,12 +428,12 @@ export const config = { ${tokens.borderWidth}: 0.0625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -408,24 +442,24 @@ export const config = { ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -443,22 +477,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -470,10 +504,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -486,12 +520,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -510,12 +544,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -533,17 +567,17 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-solid-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceSolidSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-insol/src/components/Rating/Rating.config.ts b/packages/sdds-insol/src/components/Rating/Rating.config.ts index 79e9f36f886..b47bbb22e1e 100644 --- a/packages/sdds-insol/src/components/Rating/Rating.config.ts +++ b/packages/sdds-insol/src/components/Rating/Rating.config.ts @@ -1,3 +1,36 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + bodyXXS, + bodyXXSBold, + dsplL, + dsplLBold, + dsplM, + dsplMBold, + dsplS, + dsplSBold, + h1, + h1Bold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +41,36 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; // TODO: change with token data-yellow, when it will be added to theme ${tokens.iconColor}: #F3A912; - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { l: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -48,19 +81,19 @@ export const config = { m: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -71,19 +104,19 @@ export const config = { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -94,19 +127,19 @@ export const config = { xs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.iconMarginBottom}: 0.125rem; ${tokens.contentGap}: 0.375rem; @@ -121,19 +154,19 @@ export const config = { xxs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.fontFamily}: ${bodyXXS.fontFamily}; + ${tokens.fontSize}: ${bodyXXS.fontSize}; + ${tokens.fontStyle}: ${bodyXXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.contentGap}: 0.375rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -146,19 +179,19 @@ export const config = { h1: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tokens.fontFamily}: ${h1.fontFamily}; + ${tokens.fontSize}: ${h1.fontSize}; + ${tokens.fontStyle}: ${h1.fontStyle}; + ${tokens.fontWeight}: ${h1Bold.fontWeight}; + ${tokens.letterSpacing}: ${h1.letterSpacing}; + ${tokens.lineHeight}: ${h1.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.helperTextFontFamily}: ${bodyM.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyM.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyM.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyM.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyM.lineHeight}; ${tokens.contentGap}: 1rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -177,19 +210,19 @@ export const config = { h2: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tokens.fontFamily}: ${h2.fontFamily}; + ${tokens.fontSize}: ${h2.fontSize}; + ${tokens.fontStyle}: ${h2.fontStyle}; + ${tokens.fontWeight}: ${h2Bold.fontWeight}; + ${tokens.letterSpacing}: ${h2.letterSpacing}; + ${tokens.lineHeight}: ${h2.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.875rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -208,19 +241,19 @@ export const config = { h3: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.fontFamily}: ${h3.fontFamily}; + ${tokens.fontSize}: ${h3.fontSize}; + ${tokens.fontStyle}: ${h3.fontStyle}; + ${tokens.fontWeight}: ${h3Bold.fontWeight}; + ${tokens.letterSpacing}: ${h3.letterSpacing}; + ${tokens.lineHeight}: ${h3.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.75rem; ${tokens.singleIconContentGap}: 0.375rem; @@ -239,19 +272,19 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.fontFamily}: ${h4.fontFamily}; + ${tokens.fontSize}: ${h4.fontSize}; + ${tokens.fontStyle}: ${h4.fontStyle}; + ${tokens.fontWeight}: ${h4Bold.fontWeight}; + ${tokens.letterSpacing}: ${h4.letterSpacing}; + ${tokens.lineHeight}: ${h4.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -270,19 +303,19 @@ export const config = { h5: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.fontFamily}: ${h5.fontFamily}; + ${tokens.fontSize}: ${h5.fontSize}; + ${tokens.fontStyle}: ${h5.fontStyle}; + ${tokens.fontWeight}: ${h5Bold.fontWeight}; + ${tokens.letterSpacing}: ${h5.letterSpacing}; + ${tokens.lineHeight}: ${h5.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -301,19 +334,19 @@ export const config = { h6: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tokens.fontFamily}: ${h6.fontFamily}; + ${tokens.fontSize}: ${h6.fontSize}; + ${tokens.fontStyle}: ${h6.fontStyle}; + ${tokens.fontWeight}: ${h6Bold.fontWeight}; + ${tokens.letterSpacing}: ${h6.letterSpacing}; + ${tokens.lineHeight}: ${h6.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -332,19 +365,19 @@ export const config = { displayL: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${tokens.fontFamily}: ${dsplL.fontFamily}; + ${tokens.fontSize}: ${dsplL.fontSize}; + ${tokens.fontStyle}: ${dsplL.fontStyle}; + ${tokens.fontWeight}: ${dsplLBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplL.letterSpacing}; + ${tokens.lineHeight}: ${dsplL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.helperTextFontFamily}: ${h3.fontFamily}; + ${tokens.helperTextFontSize}: ${h3.fontSize}; + ${tokens.helperTextFontStyle}: ${h3.fontStyle}; + ${tokens.helperTextFontWeight}: ${h3.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing}; + ${tokens.helperTextLineHeight}: ${h3.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -363,19 +396,19 @@ export const config = { displayM: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${tokens.fontFamily}: ${dsplM.fontFamily}; + ${tokens.fontSize}: ${dsplM.fontSize}; + ${tokens.fontStyle}: ${dsplM.fontStyle}; + ${tokens.fontWeight}: ${dsplMBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplM.letterSpacing}; + ${tokens.lineHeight}: ${dsplM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -394,19 +427,19 @@ export const config = { displayS: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${dsplS.fontFamily}; + ${tokens.fontSize}: ${dsplS.fontSize}; + ${tokens.fontStyle}: ${dsplS.fontStyle}; + ${tokens.fontWeight}: ${dsplSBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplS.letterSpacing}; + ${tokens.lineHeight}: ${dsplS.lineHeight}; + + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; diff --git a/packages/sdds-insol/src/components/Segment/SegmentGroup.config.ts b/packages/sdds-insol/src/components/Segment/SegmentGroup.config.ts index 78fc1356b3e..a94436a266e 100644 --- a/packages/sdds-insol/src/components/Segment/SegmentGroup.config.ts +++ b/packages/sdds-insol/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidSecondary, textAccent, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +9,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -73,7 +74,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-solid-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceSolidSecondary}; `, }, orientation: { diff --git a/packages/sdds-insol/src/components/Segment/SegmentItem.config.ts b/packages/sdds-insol/src/components/Segment/SegmentItem.config.ts index 05773920727..4d9d8839df8 100644 --- a/packages/sdds-insol/src/components/Segment/SegmentItem.config.ts +++ b/packages/sdds-insol/src/components/Segment/SegmentItem.config.ts @@ -1,3 +1,26 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textAccent, + textAccentHover, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,68 +31,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-accent); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-accent-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textAccent}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${segmentTokens.itemSelectedColorHover}: ${textAccentHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -83,13 +106,13 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${segmentTokens.fontWeightSelectedItem}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXS.fontWeight}; + ${segmentTokens.fontWeightSelectedItem}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${segmentTokens.itemBorderRadius}: 0.625rem; @@ -101,13 +124,13 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${segmentTokens.fontWeightSelectedItem}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXS.fontWeight}; + ${segmentTokens.fontWeightSelectedItem}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -119,13 +142,13 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${segmentTokens.fontWeightSelectedItem}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXS.fontWeight}; + ${segmentTokens.fontWeightSelectedItem}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, l: css` ${segmentTokens.itemBorderRadius}: 0.875rem; @@ -137,13 +160,13 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${segmentTokens.fontWeightSelectedItem}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyS.fontWeight}; + ${segmentTokens.fontWeightSelectedItem}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, xl: css` ${segmentTokens.itemBorderRadius}: 1rem; @@ -155,13 +178,13 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${segmentTokens.fontWeightSelectedItem}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyM.fontWeight}; + ${segmentTokens.fontWeightSelectedItem}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-insol/src/components/Select/Select.config.ts b/packages/sdds-insol/src/components/Select/Select.config.ts index e8a602afa64..c004fbcd0ce 100644 --- a/packages/sdds-insol/src/components/Select/Select.config.ts +++ b/packages/sdds-insol/src/components/Select/Select.config.ts @@ -1,3 +1,86 @@ +import { + bodyM, + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + onLightTextSecondaryActive, + onLightTextSecondaryHover, + outlineAccent, + outlineClear, + outlineNegativeMinor, + outlineNegativeMinorActive, + outlineNegativeMinorHover, + outlinePositiveMinor, + outlinePositiveMinorActive, + outlinePositiveMinorHover, + outlineSolidSecondary, + outlineTransparentTertiary, + outlineWarningMinor, + outlineWarningMinorActive, + outlineWarningMinorHover, + shadowDownHardM, + shadowDownSoftS, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentCard, + surfaceTransparentCardActive, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textAccentHover, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,376 +94,376 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldBorderColor}: var(--outline-clear); - ${tokens.textFieldBorderColorFocus}: var(--outline-solid-secondary); - ${tokens.textFieldBorderColorHover}: var(--outline-clear); - - ${tokens.textFieldBoxShadow}: var(--shadow-down-soft-s); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-accent); - ${tokens.disclosureIconColorHover}: var(--text-accent-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCardActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldBorderColor}: ${outlineClear}; + ${tokens.textFieldBorderColorFocus}: ${outlineSolidSecondary}; + ${tokens.textFieldBorderColorHover}: ${outlineClear}; + + ${tokens.textFieldBoxShadow}: ${shadowDownSoftS}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textAccent}; + ${tokens.disclosureIconColorHover}: ${textAccentHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxIconColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxIconColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; `, positive: css` - ${tokens.textFieldColor}: color-mix(in oklab, var(--text-positive) 70%, transparent); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: color-mix(in oklab, var(--text-positive) 70%, transparent); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldBorderColor}: var(--outline-positive-minor); - ${tokens.textFieldBorderColorFocus}: var(--outline-positive-minor-active); - ${tokens.textFieldBorderColorHover}: var(--outline-positive-minor-hover); - - ${tokens.textFieldBoxShadow}: var(--shadow-down-soft-s); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: color-mix(in oklab, ${textPositive} 70%, transparent); + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCardActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: color-mix(in oklab, ${textPositive} 70%, transparent); + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldBorderColor}: ${outlinePositiveMinor}; + ${tokens.textFieldBorderColorFocus}: ${outlinePositiveMinorActive}; + ${tokens.textFieldBorderColorHover}: ${outlinePositiveMinorHover}; + + ${tokens.textFieldBoxShadow}: ${shadowDownSoftS}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxIconColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxIconColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; `, warning: css` - ${tokens.textFieldColor}: color-mix(in oklab, var(--text-warning) 70%, transparent); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: color-mix(in oklab, var(--text-warning) 70%, transparent); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldBorderColor}: var(--outline-warning-minor); - ${tokens.textFieldBorderColorFocus}: var(--outline-warning-minor-active); - ${tokens.textFieldBorderColorHover}: var(--outline-warning-minor-hover); - - ${tokens.textFieldBoxShadow}: var(--shadow-down-soft-s); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: color-mix(in oklab, ${textWarning} 70%, transparent); + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCardActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: color-mix(in oklab, ${textWarning} 70%, transparent); + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldBorderColor}: ${outlineWarningMinor}; + ${tokens.textFieldBorderColorFocus}: ${outlineWarningMinorActive}; + ${tokens.textFieldBorderColorHover}: ${outlineWarningMinorHover}; + + ${tokens.textFieldBoxShadow}: ${shadowDownSoftS}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxIconColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxIconColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; `, negative: css` - ${tokens.textFieldColor}: color-mix(in oklab, var(--text-negative) 70%, transparent); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: color-mix(in oklab, var(--text-negative) 70%, transparent); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldBorderColor}: var(--outline-negative-minor); - ${tokens.textFieldBorderColorFocus}: var(--outline-negative-minor-active); - ${tokens.textFieldBorderColorHover}: var(--outline-negative-minor-hover); - - ${tokens.textFieldBoxShadow}: var(--shadow-down-soft-s); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: color-mix(in oklab, ${textNegative} 70%, transparent); + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCardActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: color-mix(in oklab, ${textNegative} 70%, transparent); + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldBorderColor}: ${outlineNegativeMinor}; + ${tokens.textFieldBorderColorFocus}: ${outlineNegativeMinorActive}; + ${tokens.textFieldBorderColorHover}: ${outlineNegativeMinorHover}; + + ${tokens.textFieldBoxShadow}: ${shadowDownSoftS}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxIconColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxIconColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; `, accent: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-accent); - ${tokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-accent-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceAccent}; + ${tokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxIconColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxIconColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; `, secondary: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxIconColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxIconColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; `, clear: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-active); - ${tokens.buttonBackgroundColor}: var(--surface-clear); - ${tokens.buttonBackgroundColorHover}: var(--surface-clear); - ${tokens.buttonBackgroundColorActive}: var(--surface-clear); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryActive}; + ${tokens.buttonBackgroundColor}: ${surfaceClear}; + ${tokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${tokens.buttonBackgroundColorActive}: ${surfaceClear}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxIconColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxIconColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; `, dark: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-transparent-deep); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceTransparentDeep}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceTransparentDeepHover}; + ${tokens.buttonBackgroundColorActive}:${onLightSurfaceTransparentDeepActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxIconColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxIconColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; `, black: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxIconColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxIconColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; `, white: css` - ${tokens.buttonColor}: var(--on-light-text-primary); - ${tokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-light-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-light-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-light-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-light-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-dark-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); - - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); + ${tokens.buttonColor}: ${onLightTextPrimary}; + ${tokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onLightTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onLightTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onLightTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onLightTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onDarkSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onDarkSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}:${onDarkSurfaceSolidDefaultActive}; + + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxIconColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxIconColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; `, }, size: { @@ -397,35 +480,35 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; + + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.938rem 0 0.813rem 0; @@ -454,12 +537,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; ${tokens.targetHeight}: 4rem; @@ -486,29 +569,29 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.3125rem; ${tokens.checkboxTriggerBorderRadiusTight}: 0.3125rem; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxIconColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); + ${tokens.checkboxIconColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; ${tokens.checkboxTriggerBorderWidth}: 0.063rem; - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; ${tokens.indicatorSize}: 0.375rem; @@ -535,35 +618,35 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; + + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -592,12 +675,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; ${tokens.targetHeight}: 3.5rem; @@ -624,29 +707,29 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; ${tokens.checkboxTriggerBorderRadiusTight}: 0.375rem; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxIconColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); + ${tokens.checkboxIconColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; ${tokens.checkboxTriggerBorderWidth}: 0.063rem; - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; ${tokens.indicatorSize}: 0.375rem; @@ -673,35 +756,35 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -730,12 +813,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -762,29 +845,29 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; ${tokens.checkboxTriggerBorderRadiusTight}: 0.375rem; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxIconColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); + ${tokens.checkboxIconColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; ${tokens.checkboxTriggerBorderWidth}: 0.063rem; - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; ${tokens.indicatorSize}: 0.375rem; @@ -811,35 +894,35 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -870,12 +953,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; @@ -902,29 +985,29 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; ${tokens.checkboxTriggerBorderRadiusTight}: 0.25rem; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxIconColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); + ${tokens.checkboxIconColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; ${tokens.checkboxTriggerBorderWidth}: 0.063rem; - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; ${tokens.indicatorSize}: 0.375rem; @@ -952,35 +1035,35 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -1009,12 +1092,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2rem; @@ -1041,29 +1124,29 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; ${tokens.checkboxTriggerBorderRadiusTight}: 0.25rem; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxIconColor}: var(--outline-accent); - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); + ${tokens.checkboxIconColor}: ${outlineAccent}; + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; ${tokens.checkboxTriggerBorderWidth}: 0.063rem; - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; ${tokens.indicatorSize}: 0.375rem; @@ -1080,63 +1163,63 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--on-dark-text-primary); - ${tokens.textFieldChipColorHover}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${onDarkTextPrimary}; + ${tokens.textFieldChipColorHover}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -1149,12 +1232,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -1173,12 +1256,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -1197,12 +1280,12 @@ export const config = { readOnly: { true: css` ${tokens.disclosureIconOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-secondary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceSolidSecondary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; ${tokens.textFieldBorderColor}: transparent; ${tokens.textFieldBorderWidth}: 0; `, diff --git a/packages/sdds-insol/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-insol/src/components/Skeleton/LineSkeleton.config.ts index 75d2ee7a606..025b026f783 100644 --- a/packages/sdds-insol/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-insol/src/components/Skeleton/LineSkeleton.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + dsplL, + dsplM, + dsplS, + h1, + h2, + h3, + h4, + h5, + h6, + surfaceSkeletonDeepGradient, + surfaceSkeletonGradient, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textL, + textM, + textS, + textXS, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, skeletonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,88 +32,88 @@ export const config = { variations: { view: { default: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient, var(--surface-skeleton-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, lighter: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient-lighter, var(--surface-skeleton-deep-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonDeepGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, }, size: { bodyL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size); + ${skeletonTokens.lineHeight}: ${bodyL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyL.fontSize}; `, bodyM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size); + ${skeletonTokens.lineHeight}: ${bodyM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyM.fontSize}; `, bodyS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size); + ${skeletonTokens.lineHeight}: ${bodyS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyS.fontSize}; `, bodyXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXS.fontSize}; `, bodyXXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXXS.fontSize}; `, dsplL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size); + ${skeletonTokens.lineHeight}: ${dsplL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplL.fontSize}; `, dsplM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size); + ${skeletonTokens.lineHeight}: ${dsplM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplM.fontSize}; `, dsplS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size); + ${skeletonTokens.lineHeight}: ${dsplS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplS.fontSize}; `, h1: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size); + ${skeletonTokens.lineHeight}: ${h1.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h1.fontSize}; `, h2: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size); + ${skeletonTokens.lineHeight}: ${h2.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h2.fontSize}; `, h3: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size); + ${skeletonTokens.lineHeight}: ${h3.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h3.fontSize}; `, h4: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size); + ${skeletonTokens.lineHeight}: ${h4.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h4.fontSize}; `, h5: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); + ${skeletonTokens.lineHeight}: ${h5.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h5.fontSize}; `, h6: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + ${skeletonTokens.lineHeight}: ${h6.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h6.fontSize}; `, textL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); + ${skeletonTokens.lineHeight}: ${textL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textL.fontSize}; `, textM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size); + ${skeletonTokens.lineHeight}: ${textM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textM.fontSize}; `, textS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size); + ${skeletonTokens.lineHeight}: ${textS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textS.fontSize}; `, textXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size); + ${skeletonTokens.lineHeight}: ${textXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textXS.fontSize}; `, }, }, diff --git a/packages/sdds-insol/src/components/Slider/Slider.config.ts b/packages/sdds-insol/src/components/Slider/Slider.config.ts index eef39c09407..e65b5ef0c22 100644 --- a/packages/sdds-insol/src/components/Slider/Slider.config.ts +++ b/packages/sdds-insol/src/components/Slider/Slider.config.ts @@ -1,3 +1,22 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + outlineClear, + outlineSolidSecondary, + shadowDownSoftS, + surfaceAccent, + surfaceAccentGradient, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentCard, + surfaceTransparentCardActive, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,88 +27,88 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.doubleBoxShadow}: var(--shadow-down-soft-s); + ${sliderTokens.doubleBoxShadow}: ${shadowDownSoftS}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBorderColor}: var(--outline-clear); - ${sliderTokens.textFieldBorderColorFocus}: var(--outline-solid-secondary); - ${sliderTokens.textFieldBorderColorHover}: var(--outline-clear); + ${sliderTokens.textFieldBorderColor}: ${outlineClear}; + ${sliderTokens.textFieldBorderColorFocus}: ${outlineSolidSecondary}; + ${sliderTokens.textFieldBorderColorHover}: ${outlineClear}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-card); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentCard}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCardActive}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.doubleBoxShadow}: var(--shadow-down-soft-s); + ${sliderTokens.doubleBoxShadow}: ${shadowDownSoftS}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBorderColor}: var(--outline-clear); - ${sliderTokens.textFieldBorderColorFocus}: var(--outline-solid-secondary); - ${sliderTokens.textFieldBorderColorHover}: var(--outline-clear); + ${sliderTokens.textFieldBorderColor}: ${outlineClear}; + ${sliderTokens.textFieldBorderColorFocus}: ${outlineSolidSecondary}; + ${sliderTokens.textFieldBorderColorHover}: ${outlineClear}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-card); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentCard}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCardActive}; `, gradient: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent-gradient); + ${sliderTokens.fillColor}: ${surfaceAccentGradient}; - ${sliderTokens.doubleBoxShadow}: var(--shadow-down-soft-s); + ${sliderTokens.doubleBoxShadow}: ${shadowDownSoftS}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBorderColor}: var(--outline-clear); - ${sliderTokens.textFieldBorderColorFocus}: var(--outline-solid-secondary); - ${sliderTokens.textFieldBorderColorHover}: var(--outline-clear); + ${sliderTokens.textFieldBorderColor}: ${outlineClear}; + ${sliderTokens.textFieldBorderColorFocus}: ${outlineSolidSecondary}; + ${sliderTokens.textFieldBorderColorHover}: ${outlineClear}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-card); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentCard}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCardActive}; `, }, size: { @@ -103,24 +122,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -138,12 +157,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -155,24 +174,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -190,12 +209,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -207,24 +226,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -242,12 +261,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-insol/src/components/Spinner/Spinner.config.ts b/packages/sdds-insol/src/components/Spinner/Spinner.config.ts index 4d9f2104def..fe567e2fa7f 100644 --- a/packages/sdds-insol/src/components/Spinner/Spinner.config.ts +++ b/packages/sdds-insol/src/components/Spinner/Spinner.config.ts @@ -1,3 +1,13 @@ +import { + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +18,28 @@ export const config = { variations: { view: { default: css` - --plasma-spinner-color: var(--text-primary); + --plasma-spinner-color: ${textPrimary}; `, secondary: css` - --plasma-spinner-color: var(--text-secondary); + --plasma-spinner-color: ${textSecondary}; `, tertiary: css` - --plasma-spinner-color: var(--text-tertiary); + --plasma-spinner-color: ${textTertiary}; `, paragraph: css` - --plasma-spinner-color: var(--text-paragraph); + --plasma-spinner-color: ${textParagraph}; `, accent: css` - --plasma-spinner-color: var(--text-accent); + --plasma-spinner-color: ${textAccent}; `, positive: css` - --plasma-spinner-color: var(--text-positive); + --plasma-spinner-color: ${textPositive}; `, warning: css` - --plasma-spinner-color: var(--text-warning); + --plasma-spinner-color: ${textWarning}; `, negative: css` - --plasma-spinner-color: var(--text-negative); + --plasma-spinner-color: ${textNegative}; `, }, }, diff --git a/packages/sdds-insol/src/components/Steps/Steps.config.ts b/packages/sdds-insol/src/components/Steps/Steps.config.ts index 9433bef1717..56ce12a74ff 100644 --- a/packages/sdds-insol/src/components/Steps/Steps.config.ts +++ b/packages/sdds-insol/src/components/Steps/Steps.config.ts @@ -1,41 +1,72 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentGradient, + surfaceAccentGradientHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent-gradient); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-gradient-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccentGradient}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentGradientHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -46,10 +77,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -59,26 +90,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -99,33 +130,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.5rem; ${tokens.largeBulletIndentHeight}: 1.25rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyL.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyM.fontFamily}; + ${tokens.contentFontSize}: ${bodyM.fontSize}; + ${tokens.contentFontStyle}: ${bodyM.fontStyle}; + ${tokens.contentFontWeight}: ${bodyM.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyM.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -146,33 +177,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -193,33 +224,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -240,33 +271,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 0.75rem; ${tokens.largeBulletIndentHeight}: 0.5rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -277,8 +308,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/sdds-insol/src/components/Switch/Switch.config.ts b/packages/sdds-insol/src/components/Switch/Switch.config.ts index 8a08bd686d8..3541afad404 100644 --- a/packages/sdds-insol/src/components/Switch/Switch.config.ts +++ b/packages/sdds-insol/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,50 +24,50 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -83,17 +96,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -104,7 +117,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-insol/src/components/Table/Table.config.ts b/packages/sdds-insol/src/components/Table/Table.config.ts index 181511440f1..0c37a771983 100644 --- a/packages/sdds-insol/src/components/Table/Table.config.ts +++ b/packages/sdds-insol/src/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + outlineAccent, + outlineTransparentTertiary, + surfaceTransparentTertiary, + textAccent, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,24 +29,24 @@ export const config = { }, size: { l: css` - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.headerRowHeight}: 3.125rem; ${tokens.rowHeight}: 3.125rem; ${tokens.cellPadding}: 0.375rem 1rem; ${tokens.checkboxCellPadding}: 0.375rem 1rem; ${tokens.checkboxTriggerBorderWidth}: 0.0625rem; - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxTriggerIconColor}: var(--outline-accent); + ${tokens.checkboxTriggerIconColor}: ${outlineAccent}; ${tokens.editableCellIconGap}: 0.5rem; ${tokens.editableCellIconButtonWidth}: 3rem; @@ -43,18 +55,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.875rem; ${tokens.editableCellInputPadding}: 0 0.75rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.75rem 0; ${tokens.filterDividerMargin}: 0.375rem 1rem; ${tokens.buttonHeight}: 2.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.875rem; @@ -64,45 +76,45 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.0625rem; - ${tokens.selectCheckboxTriggerBorderCheckedColor}: var(--text-accent); + ${tokens.selectCheckboxTriggerBorderCheckedColor}: ${textAccent}; ${tokens.selectControlPanelPadding}: 0.5rem 1rem; ${tokens.selectControlPanelGap}: 0.5rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight}; `, m: css` - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.headerRowHeight}: 2.75rem; ${tokens.rowHeight}: 2.75rem; ${tokens.cellPadding}: 0.25rem 0.875rem; ${tokens.checkboxCellPadding}: 0.25rem 0.75rem; ${tokens.checkboxTriggerBorderWidth}: 0.0625rem; - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxTriggerIconColor}: var(--outline-accent); + ${tokens.checkboxTriggerIconColor}: ${outlineAccent}; ${tokens.editableCellIconGap}: 0.375rem; ${tokens.editableCellIconButtonWidth}: 2.5rem; @@ -111,18 +123,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.625rem; ${tokens.editableCellInputPadding}: 0 0.625rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.875rem; ${tokens.buttonHeight}: 2rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.75rem; @@ -132,45 +144,45 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.0625rem; - ${tokens.selectCheckboxTriggerBorderCheckedColor}: var(--text-accent); + ${tokens.selectCheckboxTriggerBorderCheckedColor}: ${textAccent}; ${tokens.selectControlPanelPadding}: 0.25rem 0.875rem; ${tokens.selectControlPanelGap}: 0.625rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, s: css` - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.headerRowHeight}: 2.125rem; ${tokens.rowHeight}: 2.125rem; ${tokens.cellPadding}: 0.125rem 0.5rem; ${tokens.checkboxCellPadding}: 0.125rem 0.625rem; ${tokens.checkboxTriggerBorderWidth}: 0.0625rem; - ${tokens.checkboxTriggerBorderCheckedColor}: var(--outline-accent); + ${tokens.checkboxTriggerBorderCheckedColor}: ${outlineAccent}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; - ${tokens.checkboxTriggerBorderColor}: var(--outline-transparent-tertiary); + ${tokens.checkboxTriggerBorderColor}: ${outlineTransparentTertiary}; ${tokens.checkboxFillColor}: transparent; - ${tokens.checkboxTriggerIconColor}: var(--outline-accent); + ${tokens.checkboxTriggerIconColor}: ${outlineAccent}; ${tokens.editableCellIconGap}: 0.25rem; ${tokens.editableCellIconButtonWidth}: 2rem; @@ -179,18 +191,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.5rem; ${tokens.editableCellInputPadding}: 0 0.375rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.25rem 0.625rem; ${tokens.buttonHeight}: 1.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.625rem; @@ -200,25 +212,25 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.25rem 0 0; ${tokens.selectItemIconSize}: 1rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 0.875rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.0625rem; - ${tokens.selectCheckboxTriggerBorderCheckedColor}: var(--text-accent); + ${tokens.selectCheckboxTriggerBorderCheckedColor}: ${textAccent}; ${tokens.selectControlPanelPadding}: 0.25rem 0.625rem; ${tokens.selectControlPanelGap}: 0.25rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 7e1c769ad9e..2777cbc4375 100644 --- a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,14 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,78 +19,78 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-accent); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-accent); + ${tabsTokens.itemSelectedDividerColor}: ${textAccent}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textAccent}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; diff --git a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index e2973f8fe7c..9eddea1eca6 100644 --- a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + h1, + h2, + h3, + h4, + h5, + h6, + inverseTextPrimary, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,106 +31,106 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-accent); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-accent); + ${tabsTokens.itemSelectedDividerColor}: ${textAccent}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textAccent}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--on-dark-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--on-dark-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${onDarkTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${onDarkTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -123,12 +146,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXS.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -142,12 +165,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyS.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -161,12 +184,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyM.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -180,12 +203,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyL.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -197,12 +220,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tabsTokens.fontFamily}: ${h6.fontFamily}; + ${tabsTokens.fontSize}: ${h6.fontSize}; + ${tabsTokens.fontStyle}: ${h6.fontStyle}; + ${tabsTokens.fontWeight}: ${h6.fontWeight}; + ${tabsTokens.letterSpacing}: ${h6.letterSpacing}; + ${tabsTokens.lineHeight}: ${h6.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -214,12 +237,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -231,12 +254,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -248,12 +271,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -265,12 +288,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -282,12 +305,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabs.config.ts index bc3e5edf5c1..5bdc8fc72e6 100644 --- a/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-insol/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +16,36 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-insol/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/sdds-insol/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index 1b3e429c709..c80d6a2a255 100644 --- a/packages/sdds-insol/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/sdds-insol/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +16,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-accent); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-accent); + ${tabsTokens.itemSelectedDividerColor}: ${textAccent}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textAccent}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/sdds-insol/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-insol/src/components/Tabs/vertical/VerticalTabItem.config.ts index 581f19fc38c..c83387dec81 100644 --- a/packages/sdds-insol/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-insol/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +20,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +61,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXS.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -69,12 +81,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyS.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -89,12 +101,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyM.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -109,12 +121,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyL.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/sdds-insol/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/sdds-insol/src/components/Tabs/vertical/VerticalTabs.config.ts index 78eba3f047c..08defabd90d 100644 --- a/packages/sdds-insol/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/sdds-insol/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-insol/src/components/TextArea/TextArea.clear.config.ts b/packages/sdds-insol/src/components/TextArea/TextArea.clear.config.ts index 1bd27b0b317..27a7619d751 100644 --- a/packages/sdds-insol/src/components/TextArea/TextArea.clear.config.ts +++ b/packages/sdds-insol/src/components/TextArea/TextArea.clear.config.ts @@ -1,3 +1,23 @@ +import { + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -19,31 +39,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` ${tokens.inputBackgroundColor}: transparent; @@ -56,31 +76,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-warning); - ${tokens.inputColorFocus}: var(--text-warning); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textWarning}; + ${tokens.inputColorFocus}: ${textWarning}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` ${tokens.inputBackgroundColor}: transparent; @@ -93,31 +113,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-negative); - ${tokens.inputColorFocus}: var(--text-negative); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textNegative}; + ${tokens.inputColorFocus}: ${textNegative}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -147,30 +167,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -188,12 +208,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -221,30 +241,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -262,12 +282,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -295,30 +315,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -336,12 +356,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -369,30 +389,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -410,12 +430,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -443,30 +463,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -484,24 +504,24 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; ${tokens.tooltipBoxShadow}: var( --shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08) ); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -514,12 +534,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -538,12 +558,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -561,9 +581,9 @@ export const config = { }, readOnly: { true: css` - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-insol/src/components/TextArea/TextArea.config.ts b/packages/sdds-insol/src/components/TextArea/TextArea.config.ts index e18584aeec2..18ca160c3d8 100644 --- a/packages/sdds-insol/src/components/TextArea/TextArea.config.ts +++ b/packages/sdds-insol/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,39 @@ +import { + bodyM, + bodyS, + bodyXS, + bodyXXS, + outlineClear, + outlineNegativeMinor, + outlineNegativeMinorActive, + outlineNegativeMinorHover, + outlineSolidSecondary, + outlineWarningMinor, + outlineWarningMinorActive, + outlineWarningMinorHover, + shadowDownHardM, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidSecondary, + surfaceTransparentCard, + surfaceTransparentCardActive, + surfaceTransparentCardHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceWarning, + textAccent, + textNegative, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,121 +44,121 @@ export const config = { variations: { view: { default: css` - ${tokens.borderColor}: var(--outline-clear); - ${tokens.borderColorFocus}: var(--outline-solid-secondary); - ${tokens.borderColorHover}: var(--outline-clear); - ${tokens.backgroundColor}: var(--surface-transparent-card); - ${tokens.backgroundColorHover}: var(--surface-transparent-card-hover); - ${tokens.backgroundColorActive}: var(--surface-transparent-card-active); - ${tokens.backgroundColorFocus}: var(--surface-transparent-card); - - ${tokens.labelOuterColor}: var(--text-primary); - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.rightContentColor}: var(--text-secondary); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.boxShadow}: var(--shadow-down-soft-s); + ${tokens.borderColor}: ${outlineClear}; + ${tokens.borderColorFocus}: ${outlineSolidSecondary}; + ${tokens.borderColorHover}: ${outlineClear}; + ${tokens.backgroundColor}: ${surfaceTransparentCard}; + ${tokens.backgroundColorHover}: ${surfaceTransparentCardHover}; + ${tokens.backgroundColorActive}: ${surfaceTransparentCardActive}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentCard}; + + ${tokens.labelOuterColor}: ${textPrimary}; + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.rightContentColor}: ${textSecondary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.boxShadow}: ${shadowDownSoftS}; `, warning: css` - ${tokens.borderColor}: var(--outline-warning-minor); - ${tokens.borderColorFocus}: var(--outline-warning-minor-active); - ${tokens.borderColorHover}: var(--outline-warning-minor-hover); - ${tokens.backgroundColor}: var(--surface-transparent-card); - ${tokens.backgroundColorHover}: var(--surface-transparent-card-hover); - ${tokens.backgroundColorActive}: var(--surface-transparent-card-active); - ${tokens.backgroundColorFocus}: var(--surface-transparent-card); - - ${tokens.labelOuterColor}: var(--text-primary); - ${tokens.inputColor}: color-mix(in oklab, var(--text-warning) 70%, transparent); - ${tokens.inputColorFocus}: color-mix(in oklab, var(--text-warning) 70%, transparent); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: color-mix(in oklab, var(--text-warning) 70%, transparent); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.rightContentColor}: var(--text-secondary); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.boxShadow}: var(--shadow-down-soft-s); + ${tokens.borderColor}: ${outlineWarningMinor}; + ${tokens.borderColorFocus}: ${outlineWarningMinorActive}; + ${tokens.borderColorHover}: ${outlineWarningMinorHover}; + ${tokens.backgroundColor}: ${surfaceTransparentCard}; + ${tokens.backgroundColorHover}: ${surfaceTransparentCardHover}; + ${tokens.backgroundColorActive}: ${surfaceTransparentCardActive}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentCard}; + + ${tokens.labelOuterColor}: ${textPrimary}; + ${tokens.inputColor}: color-mix(in oklab, ${textWarning} 70%, transparent); + ${tokens.inputColorFocus}: color-mix(in oklab, ${textWarning} 70%, transparent); + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: color-mix(in oklab, ${textWarning} 70%, transparent); + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.rightContentColor}: ${textSecondary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.boxShadow}: ${shadowDownSoftS}; `, negative: css` - ${tokens.borderColor}: var(--outline-negative-minor); - ${tokens.borderColorFocus}: var(--outline-negative-minor-active); - ${tokens.borderColorHover}: var(--outline-negative-minor-hover); - ${tokens.backgroundColor}: var(--surface-transparent-card); - ${tokens.backgroundColorHover}: var(--surface-transparent-card-hover); - ${tokens.backgroundColorActive}: var(--surface-transparent-card-active); - ${tokens.backgroundColorFocus}: var(--surface-transparent-card); - - ${tokens.labelOuterColor}: var(--text-primary); - ${tokens.inputColor}: color-mix(in oklab, var(--text-negative) 70%, transparent); - ${tokens.inputColorFocus}: color-mix(in oklab, var(--text-negative) 70%, transparent); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: color-mix(in oklab, var(--text-negative) 70%, transparent); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.rightContentColor}: var(--text-secondary); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.boxShadow}: var(--shadow-down-soft-s); + ${tokens.borderColor}: ${outlineNegativeMinor}; + ${tokens.borderColorFocus}: ${outlineNegativeMinorActive}; + ${tokens.borderColorHover}: ${outlineNegativeMinorHover}; + ${tokens.backgroundColor}: ${surfaceTransparentCard}; + ${tokens.backgroundColorHover}: ${surfaceTransparentCardHover}; + ${tokens.backgroundColorActive}: ${surfaceTransparentCardActive}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentCard}; + + ${tokens.labelOuterColor}: ${textPrimary}; + ${tokens.inputColor}: color-mix(in oklab, ${textNegative} 70%, transparent); + ${tokens.inputColorFocus}: color-mix(in oklab, ${textNegative} 70%, transparent); + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: color-mix(in oklab, ${textNegative} 70%, transparent); + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.rightContentColor}: ${textSecondary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.boxShadow}: ${shadowDownSoftS}; `, }, size: { @@ -152,30 +188,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -193,12 +229,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.751rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -226,30 +262,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -267,12 +303,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -300,30 +336,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -341,12 +377,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -374,30 +410,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.5rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -415,12 +451,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -448,30 +484,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.375rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -489,20 +525,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -515,12 +551,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -540,12 +576,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -565,11 +601,11 @@ export const config = { ${tokens.borderColor}: transparent; ${tokens.borderColorHover}: transparent; ${tokens.borderColorFocus}: transparent; - ${tokens.leftHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; ${tokens.boxShadow}: inset 0 0 0 0 transparent; `, }, @@ -577,19 +613,19 @@ export const config = { true: css` ${tokens.readOnlyOpacity}: 1; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; - ${tokens.backgroundColorReadOnly}: var(--surface-solid-secondary); - ${tokens.inputColorReadOnly}: var(--text-primary); + ${tokens.backgroundColorReadOnly}: ${surfaceSolidSecondary}; + ${tokens.inputColorReadOnly}: ${textPrimary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.inputBackgroundColor}: var(--surface-solid-secondary); - ${tokens.helpersBackgroundColor}: var(--surface-solid-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.inputBackgroundColor}: ${surfaceSolidSecondary}; + ${tokens.helpersBackgroundColor}: ${surfaceSolidSecondary}; ${tokens.borderColor}: transparent; ${tokens.borderColorHover}: transparent; ${tokens.borderColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.placeholderColorFocus}: var(--text-primary); - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.placeholderColorFocus}: ${textPrimary}; + ${tokens.labelOuterColor}: ${textPrimary}; ${tokens.boxShadow}: inset 0 0 0 0 transparent; `, }, diff --git a/packages/sdds-insol/src/components/TextField/TextField.clear.config.ts b/packages/sdds-insol/src/components/TextField/TextField.clear.config.ts index e507f1dbb83..20d25b18c1c 100644 --- a/packages/sdds-insol/src/components/TextField/TextField.clear.config.ts +++ b/packages/sdds-insol/src/components/TextField/TextField.clear.config.ts @@ -1,3 +1,52 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,132 +58,132 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-positive); + ${tokens.color}: ${textPositive}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-positive); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textPositive}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-positive); - ${tokens.contentSlotColorHover}: var(--text-positive-hover); - ${tokens.contentSlotColorActive}: var(--text-positive-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPositive}; + ${tokens.contentSlotColorHover}: ${textPositiveHover}; + ${tokens.contentSlotColorActive}: ${textPositiveActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-warning); + ${tokens.color}: ${textWarning}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-warning); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textWarning}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-warning); - ${tokens.contentSlotColorHover}: var(--text-warning-hover); - ${tokens.contentSlotColorActive}: var(--text-warning-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textWarning}; + ${tokens.contentSlotColorHover}: ${textWarningHover}; + ${tokens.contentSlotColorActive}: ${textWarningActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-negative); + ${tokens.color}: ${textNegative}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-negative); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textNegative}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -147,40 +196,40 @@ export const config = { ${tokens.leftContentMargin}: -0.125rem 0.625rem -0.125rem 0rem; ${tokens.rightContentMargin}: -0.125rem 0rem -0.125rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.938rem 0 0.813rem 0; @@ -196,19 +245,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -227,40 +276,40 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.625rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -275,12 +324,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -299,40 +348,40 @@ export const config = { ${tokens.leftContentMargin}: -0.125rem 0.625rem -0.125rem 0rem; ${tokens.rightContentMargin}: -0.125rem 0rem -0.125rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -347,12 +396,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -371,40 +420,40 @@ export const config = { ${tokens.leftContentMargin}: -0.1875rem 0.5rem -0.1875rem 0rem; ${tokens.rightContentMargin}: -0.1875rem 0rem -0.1875rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -419,12 +468,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -443,40 +492,40 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.375rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -491,12 +540,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -509,126 +558,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -641,12 +690,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -665,12 +714,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -689,13 +738,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); + ${tokens.colorReadOnly}: ${textPrimary}; ${tokens.backgroundColorReadOnly}: transparent; - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-insol/src/components/TextField/TextField.config.ts b/packages/sdds-insol/src/components/TextField/TextField.config.ts index b4d324b1188..17cbf9df7e4 100644 --- a/packages/sdds-insol/src/components/TextField/TextField.config.ts +++ b/packages/sdds-insol/src/components/TextField/TextField.config.ts @@ -1,3 +1,59 @@ +import { + bodyM, + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + outlineClear, + outlineNegativeMinor, + outlineNegativeMinorActive, + outlineNegativeMinorHover, + outlinePositiveMinor, + outlinePositiveMinorActive, + outlinePositiveMinorHover, + outlineSolidSecondary, + outlineWarningMinor, + outlineWarningMinorActive, + outlineWarningMinorHover, + shadowDownHardM, + shadowDownSoftS, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentCard, + surfaceTransparentCardActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,132 +66,132 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - ${tokens.clearPlaceholderColor}: var(--text-secondary); - ${tokens.clearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.backgroundColor}: var(--surface-transparent-card); - ${tokens.backgroundColorFocus}: var(--surface-transparent-card-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.borderColor}: var(--outline-clear); - ${tokens.borderColorFocus}: var(--outline-solid-secondary); - ${tokens.borderColorHover}: var(--outline-clear); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - ${tokens.boxShadow}: var(--shadow-down-soft-s); + ${tokens.color}: ${textPrimary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + ${tokens.clearPlaceholderColor}: ${textSecondary}; + ${tokens.clearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.backgroundColor}: ${surfaceTransparentCard}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentCardActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.borderColor}: ${outlineClear}; + ${tokens.borderColorFocus}: ${outlineSolidSecondary}; + ${tokens.borderColorHover}: ${outlineClear}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + ${tokens.boxShadow}: ${shadowDownSoftS}; `, positive: css` - ${tokens.color}: color-mix(in oklab, var(--text-positive) 70%, transparent); - ${tokens.clearPlaceholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - ${tokens.clearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.backgroundColor}: var(--surface-transparent-card); - ${tokens.backgroundColorFocus}: var(--surface-transparent-card-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: color-mix(in oklab, var(--text-positive) 70%, transparent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.borderColor}: var(--outline-positive-minor); - ${tokens.borderColorFocus}: var(--outline-positive-minor-active); - ${tokens.borderColorHover}: var(--outline-positive-minor-hover); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - ${tokens.boxShadow}: var(--shadow-down-soft-s); + ${tokens.color}: color-mix(in oklab, ${textPositive} 70%, transparent); + ${tokens.clearPlaceholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + ${tokens.clearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.backgroundColor}: ${surfaceTransparentCard}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentCardActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: color-mix(in oklab, ${textPositive} 70%, transparent); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.borderColor}: ${outlinePositiveMinor}; + ${tokens.borderColorFocus}: ${outlinePositiveMinorActive}; + ${tokens.borderColorHover}: ${outlinePositiveMinorHover}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + ${tokens.boxShadow}: ${shadowDownSoftS}; `, warning: css` - ${tokens.color}: color-mix(in oklab, var(--text-warning) 70%, transparent); - ${tokens.clearPlaceholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - ${tokens.clearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.backgroundColor}: var(--surface-transparent-card); - ${tokens.backgroundColorFocus}: var(--surface-transparent-card-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: color-mix(in oklab, var(--text-warning) 70%, transparent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.borderColor}: var(--outline-warning-minor); - ${tokens.borderColorFocus}: var(--outline-warning-minor-active); - ${tokens.borderColorHover}: var(--outline-warning-minor-hover); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - ${tokens.boxShadow}: var(--shadow-down-soft-s); + ${tokens.color}: color-mix(in oklab, ${textWarning} 70%, transparent); + ${tokens.clearPlaceholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + ${tokens.clearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.backgroundColor}: ${surfaceTransparentCard}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentCardActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: color-mix(in oklab, ${textWarning} 70%, transparent); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.borderColor}: ${outlineWarningMinor}; + ${tokens.borderColorFocus}: ${outlineWarningMinorActive}; + ${tokens.borderColorHover}: ${outlineWarningMinorHover}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + ${tokens.boxShadow}: ${shadowDownSoftS}; `, negative: css` - ${tokens.color}: color-mix(in oklab, var(--text-negative) 70%, transparent); - ${tokens.clearPlaceholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - ${tokens.clearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.backgroundColor}: var(--surface-transparent-card); - ${tokens.backgroundColorFocus}: var(--surface-transparent-card-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: color-mix(in oklab, var(--text-negative) 70%, transparent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.borderColor}: var(--outline-negative-minor); - ${tokens.borderColorFocus}: var(--outline-negative-minor-active); - ${tokens.borderColorHover}: var(--outline-negative-minor-hover); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - ${tokens.boxShadow}: var(--shadow-down-soft-s); + ${tokens.color}: color-mix(in oklab, ${textNegative} 70%, transparent); + ${tokens.clearPlaceholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + ${tokens.clearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.backgroundColor}: ${surfaceTransparentCard}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentCardActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: color-mix(in oklab, ${textNegative} 70%, transparent); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.borderColor}: ${outlineNegativeMinor}; + ${tokens.borderColorFocus}: ${outlineNegativeMinorActive}; + ${tokens.borderColorHover}: ${outlineNegativeMinorHover}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + ${tokens.boxShadow}: ${shadowDownSoftS}; `, }, size: { @@ -149,21 +205,21 @@ export const config = { ${tokens.leftContentMargin}: -0.125rem 0.625rem -0.125rem 0rem; ${tokens.rightContentMargin}: -0.125rem 0rem -0.125rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.clearLabelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -171,20 +227,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.938rem 0 0.813rem 0; @@ -200,19 +256,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -234,37 +290,37 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.625rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.clearLabelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -280,19 +336,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -321,37 +377,37 @@ export const config = { ${tokens.leftContentMargin}: -0.125rem 0.625rem -0.125rem 0rem; ${tokens.rightContentMargin}: -0.125rem 0rem -0.125rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.clearLabelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -367,19 +423,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -408,37 +464,37 @@ export const config = { ${tokens.leftContentMargin}: -0.1875rem 0.5rem -0.1875rem 0rem; ${tokens.rightContentMargin}: -0.1875rem 0rem -0.1875rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.clearLabelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -454,19 +510,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -496,37 +552,37 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.375rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.clearLabelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -542,12 +598,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -569,7 +625,7 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); + ${tokens.placeholderColor}: ${textSecondary}; `, outer: css``, }, @@ -578,114 +634,114 @@ export const config = { }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -698,12 +754,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -722,12 +778,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -742,12 +798,12 @@ export const config = { true: css` ${tokens.disabledOpacity}: 0.4; ${tokens.borderColor}: transparent; - ${tokens.color}: var(--text-primary); - ${tokens.placeholderColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.dividerColor}: var(--surface-transparent-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.placeholderColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.dividerColor}: ${surfaceTransparentPrimary}; ${tokens.boxShadow}: inset 0 0 0 0 transparent; `, }, @@ -755,13 +811,13 @@ export const config = { true: css` ${tokens.readOnlyOpacity}: 1; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-solid-secondary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceSolidSecondary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.borderColor}: transparent; ${tokens.borderWidth}: 0; `, diff --git a/packages/sdds-insol/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/sdds-insol/src/components/TextFieldGroup/TextFieldGroup.config.ts index 200d2e26ac4..6bfb9f65fa0 100644 --- a/packages/sdds-insol/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/sdds-insol/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.textFieldDefaultRadius}: 0.75rem; @@ -77,28 +78,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -111,12 +112,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -133,28 +134,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -167,12 +168,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.textFieldSegmentedRadius}: 0.125rem; @@ -189,28 +190,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -223,12 +224,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-insol/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-insol/src/components/TimePicker/TimePicker.config.ts index 8405577c179..3f31e1032eb 100644 --- a/packages/sdds-insol/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-insol/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + outlineClear, + outlineSolidSecondary, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidSecondary, + surfaceTransparentCard, + surfaceTransparentCardActive, + surfaceTransparentCardHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,51 +38,51 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-clear); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + ${tokens.background}: ${surfaceClear}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; - ${tokens.labelColor}: var(--text-primary); + ${tokens.labelColor}: ${textPrimary}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); + ${tokens.timePickerShadow}: ${shadowDownSoftS}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-card); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-card-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-card-active); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldBoxShadow}: var(--shadow-down-soft-s); - ${tokens.borderColor}: var(--outline-clear); - ${tokens.borderColorHover}: var(--outline-clear); - ${tokens.borderColorFocus}: var(--outline-solid-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentCard}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentCardHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentCardActive}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldBoxShadow}: ${shadowDownSoftS}; + ${tokens.borderColor}: ${outlineClear}; + ${tokens.borderColorHover}: ${outlineClear}; + ${tokens.borderColorFocus}: ${outlineSolidSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -70,12 +98,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -87,12 +115,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.625rem -0.0625rem 0rem; @@ -111,34 +139,34 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.5rem; @@ -155,12 +183,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -172,12 +200,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.625rem -0.125rem 0rem; @@ -196,34 +224,34 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -240,12 +268,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.indicatorSize}: 0.375rem; @@ -258,12 +286,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.813rem 0.75rem 0.813rem 0.75rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.5rem -0.1875rem 0rem; ${tokens.textFieldRightContentMargin}: -0.1875rem 0rem -0.1875rem 0.75rem; @@ -281,34 +309,34 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.813rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -325,12 +353,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -342,12 +370,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5rem 0.625rem 0.5rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldBorderWidth}: 0.0625rem; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.375rem -0.0625rem 0rem; @@ -366,34 +394,34 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -464,11 +492,11 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-solid-secondary); + ${tokens.backgroundReadOnly}: ${surfaceSolidSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-solid-secondary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceSolidSecondary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-insol/src/components/Toast/Toast.config.ts b/packages/sdds-insol/src/components/Toast/Toast.config.ts index 8d409ed72f1..27a5a185f90 100644 --- a/packages/sdds-insol/src/components/Toast/Toast.config.ts +++ b/packages/sdds-insol/src/components/Toast/Toast.config.ts @@ -1,3 +1,17 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,49 +23,49 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-positive); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textPositive}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-negative); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textNegative}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary); + ${toastTokens.closeIconColor}: ${onDarkTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary); + ${toastTokens.closeIconColor}: ${onLightTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextSecondary}; `, }, size: { @@ -60,12 +74,12 @@ export const config = { ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/sdds-insol/src/components/Toolbar/Toolbar.config.ts b/packages/sdds-insol/src/components/Toolbar/Toolbar.config.ts index 89581b0d6bf..2bfb56658e9 100644 --- a/packages/sdds-insol/src/components/Toolbar/Toolbar.config.ts +++ b/packages/sdds-insol/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/sdds-insol/src/components/Tooltip/Tooltip.config.ts b/packages/sdds-insol/src/components/Tooltip/Tooltip.config.ts index 2ca59cef4c5..9c5b753eb50 100644 --- a/packages/sdds-insol/src/components/Tooltip/Tooltip.config.ts +++ b/packages/sdds-insol/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,4 @@ +import { bodyS, bodyXS, surfaceSolidCardBrightness, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +17,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -30,7 +31,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -41,12 +42,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -55,15 +56,15 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.color}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-insol/src/components/Tree/Tree.config.ts b/packages/sdds-insol/src/components/Tree/Tree.config.ts index e8cbfce73a6..b8ca3a3bd63 100644 --- a/packages/sdds-insol/src/components/Tree/Tree.config.ts +++ b/packages/sdds-insol/src/components/Tree/Tree.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,24 +24,24 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -53,12 +69,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.itemHeight}: 3.5rem; @@ -84,12 +100,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.itemHeight}: 3rem; @@ -115,12 +131,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -146,12 +162,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.itemHeight}: 2rem; @@ -177,12 +193,12 @@ export const config = { ${tokens.checkboxInnerSize}: 0.875rem; ${tokens.checkboxBorderRadius}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-insol/src/components/Typography/Body.config.ts b/packages/sdds-insol/src/components/Typography/Body.config.ts index 23927fdf18c..0094c6b15f1 100644 --- a/packages/sdds-insol/src/components/Typography/Body.config.ts +++ b/packages/sdds-insol/src/components/Typography/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-insol/src/components/Typography/Dspl.config.ts b/packages/sdds-insol/src/components/Typography/Dspl.config.ts index 3fb1245a027..63a582d9962 100644 --- a/packages/sdds-insol/src/components/Typography/Dspl.config.ts +++ b/packages/sdds-insol/src/components/Typography/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +18,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +38,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +58,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/sdds-insol/src/components/Typography/Heading.config.ts b/packages/sdds-insol/src/components/Typography/Heading.config.ts index 77f16729129..d770f265ada 100644 --- a/packages/sdds-insol/src/components/Typography/Heading.config.ts +++ b/packages/sdds-insol/src/components/Typography/Heading.config.ts @@ -1,3 +1,23 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, + h6, + h6Bold, + h6Medium, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configH1 = { @@ -7,14 +27,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +46,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +65,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +84,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +103,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, @@ -102,14 +122,14 @@ export const configH6 = { variations: { size: { h6: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + ${typographyTokens.typoFontFamily}: ${h6.fontFamily}; + ${typographyTokens.typoFontSize}: ${h6.fontSize}; + ${typographyTokens.typoFontStyle}: ${h6.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h6.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h6Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h6Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h6.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h6.lineHeight}; `, }, }, diff --git a/packages/sdds-insol/src/components/Typography/Text.config.ts b/packages/sdds-insol/src/components/Typography/Text.config.ts index 35e5664ce1d..fa24971e694 100644 --- a/packages/sdds-insol/src/components/Typography/Text.config.ts +++ b/packages/sdds-insol/src/components/Typography/Text.config.ts @@ -1,3 +1,20 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSlim, + textSlimBold, + textSlimMedium, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_insol'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configSlim = { variations: { size: { slim: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-slim-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-slim-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-slim-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-slim-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-slim-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-slim-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-slim-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-slim-line-height); + ${typographyTokens.typoFontFamily}: ${textSlim.fontFamily}; + ${typographyTokens.typoFontSize}: ${textSlim.fontSize}; + ${typographyTokens.typoFontStyle}: ${textSlim.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textSlim.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSlimBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSlimMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textSlim.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textSlim.lineHeight}; `, }, }, From 5fa46eaa6f1f88f981994f533cadae123819d244 Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 19:15:14 +0300 Subject: [PATCH 16/24] chore(sdds-netology): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 285 +++-- .../src/components/Attach/Attach.config.ts | 899 +++++++------- .../Autocomplete/Autocomplete.config.ts | 553 +++++---- .../src/components/Badge/Badge.config.ts | 148 ++- .../Breadcrumbs/Breadcrumbs.config.ts | 68 +- .../src/components/Button/Button.config.ts | 258 ++-- .../ButtonGroup/ButtonGroup.config.ts | 300 +++-- .../components/Calendar/Calendar.config.ts | 460 +++---- .../Calendar/CalendarDouble.config.ts | 460 +++---- .../src/components/Card/Card.config.ts | 3 +- .../components/Carousel/Carousel.config.ts | 24 +- .../src/components/Cell/Cell.config.ts | 169 +-- .../components/Checkbox/Checkbox.config.ts | 156 +-- .../components/ChipGroup/ChipGroup.config.ts | 102 +- .../components/CodeField/CodeField.config.ts | 85 +- .../components/Combobox/Combobox.config.ts | 753 ++++++------ .../src/components/Counter/Counter.config.ts | 103 +- .../DatePicker/DatePicker.clear.config.ts | 1035 ++++++++-------- .../DatePicker/DatePicker.config.ts | 1022 ++++++++-------- .../DateTimePicker/DateTimePicker.config.ts | 954 ++++++++------- .../src/components/Divider/Divider.config.ts | 14 +- .../src/components/Drawer/Drawer.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 132 +- .../components/Dropzone/Dropzone.config.ts | 53 +- .../EmbedIconButton/EmbedIconButton.config.ts | 125 +- .../EmptyState/EmptyState.config.ts | 49 +- .../src/components/File/File.config.ts | 158 +-- .../IconButton/IconButton.config.ts | 182 +-- .../InformationWrapper.config.ts | 295 ++--- .../LinkButton/LinkButton.config.ts | 210 ++-- .../src/components/List/List.config.ts | 77 +- .../src/components/Loader/Loader.config.ts | 181 +-- .../src/components/Modal/Modal.config.ts | 20 +- .../src/components/Note/Note.config.ts | 146 ++- .../Notification/Notification.config.ts | 196 +-- .../NumberInput/NumberInput.config.ts | 289 +++-- .../Pagination/Pagination.config.ts | 220 ++-- .../src/components/Popover/Popover.config.ts | 5 +- .../components/Progress/Progress.config.ts | 53 +- .../ProgressBarCircular.config.ts | 146 ++- .../components/Radiobox/Radiobox.config.ts | 154 +-- .../components/Range/Range.clear.config.ts | 484 ++++---- .../src/components/Range/Range.config.ts | 467 +++---- .../src/components/Rating/Rating.config.ts | 385 +++--- .../components/Scrollbar/Scrollbar.config.ts | 6 +- .../components/Segment/SegmentGroup.config.ts | 11 +- .../components/Segment/SegmentItem.config.ts | 168 +-- .../src/components/Select/Select.config.ts | 1086 +++++++++-------- .../Skeleton/LineSkeleton.config.ts | 108 +- .../src/components/Slider/Slider.config.ts | 209 ++-- .../src/components/Steps/Steps.config.ts | 332 ++--- .../src/components/Switch/Switch.config.ts | 103 +- .../src/components/Table/Table.config.ts | 180 +-- .../HorizontalIconTabItem.config.ts | 70 +- .../horizontal/HorizontalTabItem.config.ts | 258 ++-- .../Tabs/horizontal/HorizontalTabs.config.ts | 36 +- .../vertical/VerticalIconTabItem.config.ts | 23 +- .../Tabs/vertical/VerticalTabItem.config.ts | 90 +- .../Tabs/vertical/VerticalTabs.config.ts | 17 +- .../TextArea/TextArea.clear.config.ts | 443 +++---- .../components/TextArea/TextArea.config.ts | 642 +++++----- .../TextField/TextField.clear.config.ts | 789 ++++++------ .../components/TextField/TextField.config.ts | 811 ++++++------ .../TextFieldGroup/TextFieldGroup.config.ts | 193 +-- .../TextFieldSlider.clear.config.ts | 606 ++++----- .../TextFieldSlider/TextFieldSlider.config.ts | 658 +++++----- .../TimePicker/TimePicker.config.ts | 331 ++--- .../src/components/Toast/Toast.config.ts | 70 +- .../src/components/Toolbar/Toolbar.config.ts | 11 +- .../src/components/Tooltip/Tooltip.config.ts | 33 +- .../src/components/Tree/Tree.config.ts | 106 +- .../src/components/Typography/Body.config.ts | 97 +- .../src/components/Typography/Dspl.config.ts | 59 +- .../components/Typography/Heading.config.ts | 116 +- .../src/components/Typography/Text.config.ts | 78 +- 75 files changed, 10608 insertions(+), 9024 deletions(-) diff --git a/packages/sdds-netology/src/components/Accordion/Accordion.config.ts b/packages/sdds-netology/src/components/Accordion/Accordion.config.ts index d70ce2c93e6..d2c6d37515d 100644 --- a/packages/sdds-netology/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-netology/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,28 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,12 +36,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, @@ -24,14 +49,14 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -42,19 +67,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.875rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyLBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -63,19 +88,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -84,19 +109,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -105,19 +130,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXSBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.lineHeight}; `, h2: css` ${accordionTokens.accordionItemPaddingVertical}: 1rem; @@ -126,19 +151,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h2Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -147,19 +172,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 0.688rem; @@ -167,19 +192,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h5: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -187,19 +212,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h6: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -207,19 +232,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h6Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Attach/Attach.config.ts b/packages/sdds-netology/src/components/Attach/Attach.config.ts index b62ab061eec..f44c5323652 100644 --- a/packages/sdds-netology/src/components/Attach/Attach.config.ts +++ b/packages/sdds-netology/src/components/Attach/Attach.config.ts @@ -1,3 +1,54 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,439 +61,439 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.buttonColorActive}: var(--text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.buttonColorHover}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.buttonColorActive}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.iconButtonColorHover}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.iconButtonColorActive}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary-hover); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.buttonColorActive}: var(--text-primary-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColorHover}: ${textPrimaryHover}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.buttonColorActive}: ${textPrimaryActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary-hover); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonColorActive}: var(--text-primary-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonColorActive}: ${textPrimaryActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, success: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-positive); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfacePositive}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, warning: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-warning); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceWarning}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, critical: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-negative); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceNegative}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-negative-active); - - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; + + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, dark: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, black: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, white: css` - ${attachTokens.buttonColor}: var(--on-light-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.buttonColor}: ${onLightTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -457,12 +508,12 @@ export const config = { ${attachTokens.buttonWidth}: 12.5rem; ${attachTokens.buttonPadding}: 1.5rem; ${attachTokens.buttonRadius}: 0.875rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyL.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -481,37 +532,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonHeight}: 3.5rem; ${attachTokens.iconButtonWidth}: 3.5rem; ${attachTokens.iconButtonPadding}: 1.5rem; ${attachTokens.iconButtonRadius}: 0.875rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -520,12 +571,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -547,12 +598,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -571,37 +622,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -610,12 +661,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -637,12 +688,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -661,37 +712,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -700,12 +751,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -727,12 +778,12 @@ export const config = { ${attachTokens.buttonWidth}: 10rem; ${attachTokens.buttonPadding}: 0.75rem; ${attachTokens.buttonRadius}: 0.5rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -751,37 +802,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.25rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2rem; ${attachTokens.iconButtonWidth}: 2rem; ${attachTokens.iconButtonPadding}: 0.75rem; ${attachTokens.iconButtonRadius}: 0.5rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -790,12 +841,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/sdds-netology/src/components/Autocomplete/Autocomplete.config.ts b/packages/sdds-netology/src/components/Autocomplete/Autocomplete.config.ts index 445f4504839..756159b66d0 100644 --- a/packages/sdds-netology/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/sdds-netology/src/components/Autocomplete/Autocomplete.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,172 +40,172 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-positive); - ${tokens.textFieldDividerColorHover}: var(--surface-positive); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfacePositive}; + ${tokens.textFieldDividerColorHover}: ${surfacePositive}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-warning); - ${tokens.textFieldDividerColorHover}: var(--surface-warning); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceWarning}; + ${tokens.textFieldDividerColorHover}: ${surfaceWarning}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--surface-negative); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${surfaceNegative}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, }, size: { @@ -193,21 +224,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -215,12 +246,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -240,12 +271,12 @@ export const config = { ${tokens.itemPadding}: 1.0625rem 1rem; ${tokens.itemBorderRadius}: 0.75rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; ${tokens.emptyStateGap}: 0.5rem; @@ -268,21 +299,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -290,12 +321,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -315,12 +346,12 @@ export const config = { ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; ${tokens.emptyStateGap}: 0.375rem; @@ -343,21 +374,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -365,12 +396,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -390,12 +421,12 @@ export const config = { ${tokens.itemPadding}: 0.6875rem 0.75rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -418,21 +449,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -440,12 +471,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -465,12 +496,12 @@ export const config = { ${tokens.itemPadding}: 0.5625rem 0.5rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; ${tokens.emptyStateGap}: 0.25rem; @@ -481,22 +512,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -509,12 +540,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -533,12 +564,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -556,14 +587,14 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Badge/Badge.config.ts b/packages/sdds-netology/src/components/Badge/Badge.config.ts index 3d8e8df196e..7ed52a240c7 100644 --- a/packages/sdds-netology/src/components/Badge/Badge.config.ts +++ b/packages/sdds-netology/src/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +36,67 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -78,12 +106,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -97,12 +125,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -116,12 +144,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -135,12 +163,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -159,7 +187,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/sdds-netology/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/sdds-netology/src/components/Breadcrumbs/Breadcrumbs.config.ts index 1661a5df0e3..9ad3d874083 100644 --- a/packages/sdds-netology/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/sdds-netology/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,53 +20,53 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { l: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.5rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-l-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-l-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-l-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-l-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-l-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight}; `, m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${breadcrumbsTokens.breadcrumbsGap}: 0rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-xs-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-xs-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-xs-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-xs-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-xs-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Button/Button.config.ts b/packages/sdds-netology/src/components/Button/Button.config.ts index 5d4e666a7b9..575cb4b211a 100644 --- a/packages/sdds-netology/src/components/Button/Button.config.ts +++ b/packages/sdds-netology/src/components/Button/Button.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,104 +53,104 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -115,12 +159,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.75rem; ${buttonTokens.buttonRadius}: 1rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.5rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -136,12 +180,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 0.875rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -157,12 +201,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -178,12 +222,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -199,12 +243,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -220,12 +264,12 @@ export const config = { ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: 0.375rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 0.75rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -244,7 +288,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/sdds-netology/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/sdds-netology/src/components/ButtonGroup/ButtonGroup.config.ts index 38cdcc186d3..23aa75f4cb0 100644 --- a/packages/sdds-netology/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/sdds-netology/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,124 +56,124 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, success: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; `, }, size: { @@ -136,12 +184,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 4rem; ${buttonGroupTokens.buttonPadding}: 1.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, l: css` ${buttonGroupTokens.buttonDefaultRadius}: 0.875rem; @@ -150,12 +198,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3.5rem; ${buttonGroupTokens.buttonPadding}: 1.5rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, m: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -165,12 +213,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -179,12 +227,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -193,12 +241,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -207,12 +255,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 1.5rem; ${buttonGroupTokens.buttonPadding}: 0.625rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-netology/src/components/Calendar/Calendar.config.ts b/packages/sdds-netology/src/components/Calendar/Calendar.config.ts index fc0a15388db..a79fdb1d1f4 100644 --- a/packages/sdds-netology/src/components/Calendar/Calendar.config.ts +++ b/packages/sdds-netology/src/components/Calendar/Calendar.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,38 +35,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -51,46 +77,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +126,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 4rem; ${calendarBaseTokens.iconButtonWidth}: 4rem; @@ -120,46 +146,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -169,13 +195,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3.5rem; ${calendarBaseTokens.iconButtonWidth}: 3.5rem; @@ -189,46 +215,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -238,13 +264,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -258,46 +284,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -307,13 +333,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -327,46 +353,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -376,13 +402,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; @@ -400,12 +426,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -414,7 +440,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -425,12 +451,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -439,7 +465,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-netology/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-netology/src/components/Calendar/CalendarDouble.config.ts index 70c9a8be880..02dc74fb697 100644 --- a/packages/sdds-netology/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-netology/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,39 +35,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -52,46 +78,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +127,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 4rem; ${calendarDoubleTokens.iconButtonWidth}: 4rem; @@ -121,46 +147,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -170,13 +196,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; @@ -190,46 +216,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -239,13 +265,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -259,46 +285,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -308,13 +334,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -328,46 +354,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +403,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; @@ -401,12 +427,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -415,7 +441,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -426,12 +452,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -440,7 +466,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-netology/src/components/Card/Card.config.ts b/packages/sdds-netology/src/components/Card/Card.config.ts index 2899613fb13..a71153915cc 100644 --- a/packages/sdds-netology/src/components/Card/Card.config.ts +++ b/packages/sdds-netology/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,7 +9,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/sdds-netology/src/components/Carousel/Carousel.config.ts b/packages/sdds-netology/src/components/Carousel/Carousel.config.ts index f3fd82e4491..f333008d0bf 100644 --- a/packages/sdds-netology/src/components/Carousel/Carousel.config.ts +++ b/packages/sdds-netology/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +16,14 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary); - ${tokens.paginationDotActiveBackground}: var(--surface-solid-default); - ${tokens.controlIconButtonColor}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.controlIconButtonColorHover}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.controlIconButtonColorActive}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary}; + ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault}; + ${tokens.controlIconButtonColor}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.controlIconButtonColorHover}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.controlIconButtonColorActive}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, }, size: { diff --git a/packages/sdds-netology/src/components/Cell/Cell.config.ts b/packages/sdds-netology/src/components/Cell/Cell.config.ts index 6588088c11f..77ecbee5e70 100644 --- a/packages/sdds-netology/src/components/Cell/Cell.config.ts +++ b/packages/sdds-netology/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -87,26 +88,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -119,26 +120,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Checkbox/Checkbox.config.ts b/packages/sdds-netology/src/components/Checkbox/Checkbox.config.ts index 53d71aca8ad..54cbb14b69d 100644 --- a/packages/sdds-netology/src/components/Checkbox/Checkbox.config.ts +++ b/packages/sdds-netology/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,18 +33,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -39,18 +55,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${checkboxTokens.margin}: 0; @@ -60,91 +76,91 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.125rem; ${checkboxTokens.contentTopOffset}: 0.0625rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyL.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${checkboxTokens.fillColor}: var(--text-primary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPrimary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${checkboxTokens.fillColor}: var(--text-secondary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textSecondary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${checkboxTokens.fillColor}: var(--text-tertiary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textTertiary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${checkboxTokens.fillColor}: var(--text-paragraph); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textParagraph}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${checkboxTokens.fillColor}: var(--text-positive); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPositive}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${checkboxTokens.fillColor}: var(--text-warning); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textWarning}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, negative: css` - ${checkboxTokens.fillColor}: var(--text-negative); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textNegative}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-negative); + ${checkboxTokens.triggerBorderColor}: ${textNegative}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -155,7 +171,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-netology/src/components/ChipGroup/ChipGroup.config.ts b/packages/sdds-netology/src/components/ChipGroup/ChipGroup.config.ts index 2bed06ad8c0..690d82af44e 100644 --- a/packages/sdds-netology/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/sdds-netology/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +26,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +57,12 @@ export const config = { ${tokens.chipHeight}: 3rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.5rem; @@ -60,12 +78,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -81,12 +99,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; @@ -102,12 +120,12 @@ export const config = { ${tokens.chipHeight}: 1.5rem; ${tokens.chipPadding}: 0 0.625rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/sdds-netology/src/components/CodeField/CodeField.config.ts b/packages/sdds-netology/src/components/CodeField/CodeField.config.ts index d0109404d66..d6b96618fc3 100644 --- a/packages/sdds-netology/src/components/CodeField/CodeField.config.ts +++ b/packages/sdds-netology/src/components/CodeField/CodeField.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodyXS, + outlineAccent, + surfaceAccent, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, codeFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,19 +26,19 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--surface-accent); + ${tokens.caretColor}: ${surfaceAccent}; - ${tokens.captionColor}: var(--text-secondary); - ${tokens.captionColorError}: var(--text-negative); + ${tokens.captionColor}: ${textSecondary}; + ${tokens.captionColorError}: ${textNegative}; - ${tokens.codeColor}: var(--text-primary); - ${tokens.codeColorError}: var(--text-negative); - ${tokens.borderColorFocus}: var(--outline-accent); + ${tokens.codeColor}: ${textPrimary}; + ${tokens.codeColorError}: ${textNegative}; + ${tokens.borderColorFocus}: ${outlineAccent}; - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; `, }, size: { @@ -34,19 +51,19 @@ export const config = { ${tokens.codeItemWidth}: 2.75rem; ${tokens.codeItemHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.captionFontFamily}: ${bodyS.fontFamily}; + ${tokens.captionFontSize}: ${bodyS.fontSize}; + ${tokens.captionFontStyle}: ${bodyS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyS.lineHeight}; ${tokens.borderRadius}: 0.875rem; ${tokens.borderRadiusSegmented}: 0.375rem; @@ -61,19 +78,19 @@ export const config = { ${tokens.codeItemWidth}: 2.375rem; ${tokens.codeItemHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.captionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.captionFontSize}: ${bodyXS.fontSize}; + ${tokens.captionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyXS.lineHeight}; ${tokens.borderRadius}: 0.75rem; ${tokens.borderRadiusSegmented}: 0.25rem; diff --git a/packages/sdds-netology/src/components/Combobox/Combobox.config.ts b/packages/sdds-netology/src/components/Combobox/Combobox.config.ts index 9b023838c5d..eab31c4dc9d 100644 --- a/packages/sdds-netology/src/components/Combobox/Combobox.config.ts +++ b/packages/sdds-netology/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,221 +40,221 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -243,20 +274,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -264,12 +295,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -292,12 +323,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 1rem; ${tokens.padding}: 0.125rem; @@ -319,19 +350,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -364,20 +395,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -385,12 +416,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -413,12 +444,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -440,19 +471,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -485,20 +516,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -506,12 +537,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -534,12 +565,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 0.625rem 0.875rem 0.625rem 0.875rem; ${tokens.padding}: 0.125rem; @@ -561,19 +592,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -606,20 +637,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -627,12 +658,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -655,12 +686,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 0.5rem 0.625rem 0.5rem 0.625rem; ${tokens.padding}: 0.125rem; @@ -682,19 +713,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -714,22 +745,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -742,12 +773,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -766,12 +797,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -789,13 +820,13 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Counter/Counter.config.ts b/packages/sdds-netology/src/components/Counter/Counter.config.ts index 140aa43a57f..0c0fdf42446 100644 --- a/packages/sdds-netology/src/components/Counter/Counter.config.ts +++ b/packages/sdds-netology/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,32 +23,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -41,56 +56,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/DatePicker/DatePicker.clear.config.ts b/packages/sdds-netology/src/components/DatePicker/DatePicker.clear.config.ts index c2e334a638a..233efa22b22 100644 --- a/packages/sdds-netology/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/sdds-netology/src/components/DatePicker/DatePicker.clear.config.ts @@ -1,3 +1,46 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,64 +51,64 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); + ${tokens.outlineFocusColor}: ${surfaceAccent}; ${tokens.background}: transparent; ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.focusColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.focusColor}: ${textAccent}; ${tokens.textFieldBackgroundColor}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -74,76 +117,76 @@ export const config = { ${tokens.textFieldBackgroundSuccessColor}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -152,12 +195,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -167,12 +210,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -198,30 +241,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}:0.82rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; @@ -239,46 +282,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -289,25 +332,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -318,12 +361,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -333,12 +376,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -369,30 +412,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -410,46 +453,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -460,25 +503,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -489,12 +532,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -504,12 +547,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -540,30 +583,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -581,46 +624,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -631,25 +674,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -660,12 +703,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -675,12 +718,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -711,30 +754,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -752,46 +795,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -802,25 +845,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -831,12 +874,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -846,12 +889,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -882,30 +925,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -923,46 +966,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -973,25 +1016,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -1008,12 +1051,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1022,7 +1065,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1033,12 +1076,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1047,15 +1090,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1068,12 +1111,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1092,12 +1135,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1116,15 +1159,15 @@ export const config = { readOnly: { true: css` ${tokens.backgroundReadOnly}: transparent; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-netology/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-netology/src/components/DatePicker/DatePicker.config.ts index aba695d13e2..e9d253bcb91 100644 --- a/packages/sdds-netology/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-netology/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,110 +51,110 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -121,12 +163,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -136,12 +178,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -165,30 +207,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -206,46 +248,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -256,25 +298,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -285,12 +327,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -300,12 +342,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -335,30 +377,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -376,46 +418,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -426,25 +468,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -455,12 +497,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -470,12 +512,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -505,30 +547,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -546,46 +588,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -596,25 +638,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -625,12 +667,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -640,12 +682,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -675,30 +717,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -716,46 +758,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -766,25 +808,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -795,12 +837,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -810,12 +852,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -845,30 +887,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -886,46 +928,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -936,25 +978,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -971,12 +1013,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -985,7 +1027,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -996,12 +1038,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1010,15 +1052,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1031,12 +1073,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1055,12 +1097,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1078,16 +1120,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-netology/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/sdds-netology/src/components/DateTimePicker/DateTimePicker.config.ts index 6ac3406a0e3..b7278e6a571 100644 --- a/packages/sdds-netology/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/sdds-netology/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,91 +52,91 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -113,30 +155,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -146,12 +188,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -168,46 +210,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.875rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.875rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.875rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -218,13 +260,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; @@ -237,21 +279,21 @@ export const config = { ${tokens.timePickerItemHeight}: 4rem; ${tokens.timePickerItemBorderRadius}: 0.875rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -272,30 +314,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -305,12 +347,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -327,46 +369,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +419,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; @@ -396,21 +438,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3.5rem; ${tokens.timePickerItemBorderRadius}: 0.75rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -431,30 +473,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +506,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -486,46 +528,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -536,13 +578,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; @@ -555,21 +597,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3rem; ${tokens.timePickerItemBorderRadius}: 0.625rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyM.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyM.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyM.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -590,30 +632,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -623,12 +665,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -645,46 +687,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -695,13 +737,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -714,21 +756,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -749,30 +791,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -782,12 +824,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -804,46 +846,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -854,13 +896,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -873,21 +915,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -962,12 +1004,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -976,7 +1018,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -987,12 +1029,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1001,7 +1043,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -1011,12 +1053,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-netology/src/components/Divider/Divider.config.ts b/packages/sdds-netology/src/components/Divider/Divider.config.ts index df0449d5c06..6dbbf4df60c 100644 --- a/packages/sdds-netology/src/components/Divider/Divider.config.ts +++ b/packages/sdds-netology/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/sdds-netology/src/components/Drawer/Drawer.config.ts b/packages/sdds-netology/src/components/Drawer/Drawer.config.ts index b0b00b15040..d5b00bec29e 100644 --- a/packages/sdds-netology/src/components/Drawer/Drawer.config.ts +++ b/packages/sdds-netology/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/sdds-netology/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-netology/src/components/Dropdown/Dropdown.config.ts index f14dd28fbd7..443b0027ea9 100644 --- a/packages/sdds-netology/src/components/Dropdown/Dropdown.config.ts +++ b/packages/sdds-netology/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,11 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -24,12 +32,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.5rem; ${tokens.dividerMarginBottomTight}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -37,12 +45,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.padding}: 0.125rem; @@ -61,12 +69,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -74,12 +82,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.padding}: 0.125rem; @@ -98,12 +106,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -111,12 +119,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 0.125rem; @@ -135,12 +143,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -148,12 +156,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.padding}: 0.125rem; @@ -172,12 +180,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.125rem; ${tokens.dividerMarginBottomTight}: 0.125rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -185,18 +193,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-netology/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..b1acc17d9ef 100644 --- a/packages/sdds-netology/src/components/Dropzone/Dropzone.config.ts +++ b/packages/sdds-netology/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-netology/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/sdds-netology/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..7bbb99b8b26 100644 --- a/packages/sdds-netology/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/sdds-netology/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-netology/src/components/EmptyState/EmptyState.config.ts b/packages/sdds-netology/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..a342d53bbc6 100644 --- a/packages/sdds-netology/src/components/EmptyState/EmptyState.config.ts +++ b/packages/sdds-netology/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/File/File.config.ts b/packages/sdds-netology/src/components/File/File.config.ts index 455a87f891b..07d42b7781c 100644 --- a/packages/sdds-netology/src/components/File/File.config.ts +++ b/packages/sdds-netology/src/components/File/File.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, fileTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +24,36 @@ export const config = { variations: { view: { default: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-secondary); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textSecondary}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-solid-default); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; `, negative: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-negative); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textNegative}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-negative); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceNegative}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-negative); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceNegative}; `, }, size: { @@ -52,19 +68,19 @@ export const config = { ${tokens.cellGap}: 0.75rem; ${tokens.cellPaddingRightContent}: 0.75rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -94,19 +110,19 @@ export const config = { ${tokens.cellGap}: 0.625rem; ${tokens.cellPaddingRightContent}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -136,19 +152,19 @@ export const config = { ${tokens.cellGap}: 0.5rem; ${tokens.cellPaddingRightContent}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -178,19 +194,19 @@ export const config = { ${tokens.cellGap}: 0.375rem; ${tokens.cellPaddingRightContent}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 24; ${tokens.progressBarCircularHeight}: 1.5rem; diff --git a/packages/sdds-netology/src/components/IconButton/IconButton.config.ts b/packages/sdds-netology/src/components/IconButton/IconButton.config.ts index 9d760c4f3f2..fa898e69464 100644 --- a/packages/sdds-netology/src/components/IconButton/IconButton.config.ts +++ b/packages/sdds-netology/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,74 +49,74 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -85,12 +125,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 4rem; ${iconButtonTokens.iconButtonPadding}: 1.75rem; ${iconButtonTokens.iconButtonRadius}: 1rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -100,12 +140,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3.5rem; ${iconButtonTokens.iconButtonPadding}: 1.5rem; ${iconButtonTokens.iconButtonRadius}: 0.875rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -115,12 +155,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -130,12 +170,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -145,12 +185,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -163,7 +203,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-netology/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/sdds-netology/src/components/InformationWrapper/InformationWrapper.config.ts index 45b90809f49..8455c7077c7 100644 --- a/packages/sdds-netology/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/sdds-netology/src/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,18 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,50 +23,50 @@ export const config = { variations: { view: { default: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { l: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; @@ -63,29 +78,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -95,12 +110,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, m: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; @@ -112,29 +127,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -144,12 +159,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, s: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -161,29 +176,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -193,12 +208,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, xs: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; @@ -210,29 +225,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -244,10 +259,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -260,12 +275,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -284,12 +299,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; diff --git a/packages/sdds-netology/src/components/LinkButton/LinkButton.config.ts b/packages/sdds-netology/src/components/LinkButton/LinkButton.config.ts index 65d6cd4557f..14ee9919f4b 100644 --- a/packages/sdds-netology/src/components/LinkButton/LinkButton.config.ts +++ b/packages/sdds-netology/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +38,70 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, }, size: { @@ -79,12 +109,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 4rem; ${linkButtonTokens.linkButtonPadding}: 1.25rem 0; ${linkButtonTokens.linkButtonRadius}: 1rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.5rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -98,12 +128,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3.5rem; ${linkButtonTokens.linkButtonPadding}: 1rem 0; ${linkButtonTokens.linkButtonRadius}: 0.875rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -117,12 +147,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -136,12 +166,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -155,12 +185,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -174,12 +204,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 1.5rem; ${linkButtonTokens.linkButtonPadding}: 0.375rem 0; ${linkButtonTokens.linkButtonRadius}: 0.375rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 0.75rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/sdds-netology/src/components/List/List.config.ts b/packages/sdds-netology/src/components/List/List.config.ts index b0a7acc37b0..88cbba4349d 100644 --- a/packages/sdds-netology/src/components/List/List.config.ts +++ b/packages/sdds-netology/src/components/List/List.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +17,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +38,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${listTokens.listItemFontFamily}: ${bodyXS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyXS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyXS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyXS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${listTokens.listItemPaddingTop}: 0.689rem; @@ -46,12 +55,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -63,12 +72,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -80,12 +89,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, xl: css` ${listTokens.listItemPaddingTop}: 1.3125rem; @@ -97,12 +106,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-netology/src/components/Loader/Loader.config.ts b/packages/sdds-netology/src/components/Loader/Loader.config.ts index 25fef650be1..0826d08735d 100644 --- a/packages/sdds-netology/src/components/Loader/Loader.config.ts +++ b/packages/sdds-netology/src/components/Loader/Loader.config.ts @@ -1,3 +1,30 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + overlaySoft, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, loaderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +35,67 @@ export const config = { variations: { view: { default: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-solid-default); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceSolidDefault}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-primary); + ${loaderTokens.spinnerColor}: ${textPrimary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, secondary: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceTransparentSecondary}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-secondary); + ${loaderTokens.spinnerColor}: ${textSecondary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, accent: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-accent); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceAccent}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-accent); + ${loaderTokens.spinnerColor}: ${textAccent}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, positive: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-positive); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfacePositive}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-positive); + ${loaderTokens.spinnerColor}: ${textPositive}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, warning: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-warning); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceWarning}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-warning); + ${loaderTokens.spinnerColor}: ${textWarning}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, negative: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-negative); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceNegative}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-negative); + ${loaderTokens.spinnerColor}: ${textNegative}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, info: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-info); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceInfo}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-info); + ${loaderTokens.spinnerColor}: ${textInfo}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, }, size: { @@ -81,12 +108,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 8rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h2.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h2.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h2.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h2Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h2.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h2.lineHeight}; ${loaderTokens.spinnerSize}: 8rem; `, @@ -99,12 +126,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 5.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h5.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h5.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h5.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h5Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h5.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h5.lineHeight}; ${loaderTokens.spinnerSize}: 5.5rem; `, @@ -117,12 +144,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyL.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyL.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyL.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyL.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyL.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyL.lineHeight}; ${loaderTokens.spinnerSize}: 3.5rem; `, @@ -135,12 +162,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyM.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyM.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyM.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyM.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyM.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyM.lineHeight}; ${loaderTokens.spinnerSize}: 3rem; `, @@ -153,12 +180,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 2.25rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyS.lineHeight}; ${loaderTokens.spinnerSize}: 2.25rem; `, @@ -171,12 +198,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXS.lineHeight}; ${loaderTokens.spinnerSize}: 1.5rem; `, @@ -189,12 +216,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXXS.lineHeight}; ${loaderTokens.spinnerSize}: 1rem; `, diff --git a/packages/sdds-netology/src/components/Modal/Modal.config.ts b/packages/sdds-netology/src/components/Modal/Modal.config.ts index 8b107b98ea3..df83a48a53d 100644 --- a/packages/sdds-netology/src/components/Modal/Modal.config.ts +++ b/packages/sdds-netology/src/components/Modal/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,16 +16,16 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-netology/src/components/Note/Note.config.ts b/packages/sdds-netology/src/components/Note/Note.config.ts index ee26ef2fea1..0bafc6e378c 100644 --- a/packages/sdds-netology/src/components/Note/Note.config.ts +++ b/packages/sdds-netology/src/components/Note/Note.config.ts @@ -1,3 +1,23 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textL, + textLBold, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textWarning, + textXS, + textXSBold, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +28,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -46,19 +66,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 2rem; ${tokens.fixedContentBeforePadding}: 0.25rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.titleFontFamily}: ${textL.fontFamily}; + ${tokens.titleFontSize}: ${textL.fontSize}; + ${tokens.titleFontStyle}: ${textL.fontStyle}; + ${tokens.titleFontWeight}: ${textLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textL.letterSpacing}; + ${tokens.titleLineHeight}: ${textL.lineHeight}; - ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.textFontFamily}: ${textL.fontFamily}; + ${tokens.textFontSize}: ${textL.fontSize}; + ${tokens.textFontStyle}: ${textL.fontStyle}; + ${tokens.textFontWeight}: ${textL.fontWeight}; + ${tokens.textLetterSpacing}: ${textL.letterSpacing}; + ${tokens.textLineHeight}: ${textL.lineHeight}; `, m: css` ${tokens.padding}: 1.25rem 1.5rem; @@ -72,19 +92,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -98,19 +118,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.titleFontFamily}: ${textS.fontFamily}; + ${tokens.titleFontSize}: ${textS.fontSize}; + ${tokens.titleFontStyle}: ${textS.fontStyle}; + ${tokens.titleFontWeight}: ${textSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; + ${tokens.titleLineHeight}: ${textS.lineHeight}; - ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.textFontFamily}: ${textS.fontFamily}; + ${tokens.textFontSize}: ${textS.fontSize}; + ${tokens.textFontStyle}: ${textS.fontStyle}; + ${tokens.textFontWeight}: ${textS.fontWeight}; + ${tokens.textLetterSpacing}: ${textS.letterSpacing}; + ${tokens.textLineHeight}: ${textS.lineHeight}; `, xs: css` ${tokens.padding}: 0.75rem 1rem; @@ -124,19 +144,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.titleFontFamily}: ${textXS.fontFamily}; + ${tokens.titleFontSize}: ${textXS.fontSize}; + ${tokens.titleFontStyle}: ${textXS.fontStyle}; + ${tokens.titleFontWeight}: ${textXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.titleLineHeight}: ${textXS.lineHeight}; - ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.textFontFamily}: ${textXS.fontFamily}; + ${tokens.textFontSize}: ${textXS.fontSize}; + ${tokens.textFontStyle}: ${textXS.fontStyle}; + ${tokens.textFontWeight}: ${textXS.fontWeight}; + ${tokens.textLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.textLineHeight}: ${textXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Notification/Notification.config.ts b/packages/sdds-netology/src/components/Notification/Notification.config.ts index 3963e77e1e2..fabaa4624e5 100644 --- a/packages/sdds-netology/src/components/Notification/Notification.config.ts +++ b/packages/sdds-netology/src/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +20,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +52,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +106,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +160,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +214,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +268,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/sdds-netology/src/components/NumberInput/NumberInput.config.ts b/packages/sdds-netology/src/components/NumberInput/NumberInput.config.ts index e55e70fd713..cb9b83a0348 100644 --- a/packages/sdds-netology/src/components/NumberInput/NumberInput.config.ts +++ b/packages/sdds-netology/src/components/NumberInput/NumberInput.config.ts @@ -1,3 +1,40 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseSurfaceTransparentSecondary, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextTertiary, + onDarkSurfaceTransparentSecondary, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextTertiary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,26 +47,26 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-solid-default); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${inverseSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceSolidDefault}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -37,26 +74,26 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, secondary: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.iconButtonColorSolidActive}: var(--text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -64,27 +101,27 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, accent: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--inverse-text-primary); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--on-dark-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--on-dark-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-accent); - - ${tokens.iconButtonColor}: var(--on-dark-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-accent); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${inverseTextPrimary}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${onDarkTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${onDarkTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${onDarkSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceAccent}; + + ${tokens.iconButtonColor}: ${onDarkTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${onDarkTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${onDarkTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -92,25 +129,25 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, clear: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; ${tokens.backgroundColorSolid}: transparent; - ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonColor}: ${textPrimary}; ${tokens.iconButtonBackgroundColor}: transparent; - ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; ${tokens.iconButtonBackgroundColorHover}: transparent; - ${tokens.iconButtonColorActive}: var(--text-primary-active); + ${tokens.iconButtonColorActive}: ${textPrimaryActive}; ${tokens.iconButtonBackgroundColorActive}: transparent; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -125,12 +162,12 @@ export const config = { ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${tokens.iconButtonRadius}: 0.875rem; ${tokens.iconButtonSegmentationRadius}: 0.375rem; @@ -140,12 +177,12 @@ export const config = { ${tokens.textWrapperHeight}: 3.5rem; ${tokens.textWrapperPadding}: 1.063rem 1.125rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -157,12 +194,12 @@ export const config = { ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -172,12 +209,12 @@ export const config = { ${tokens.textWrapperHeight}: 3rem; ${tokens.textWrapperPadding}: 0.875rem 1rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -189,12 +226,12 @@ export const config = { ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 1rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.625rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -204,12 +241,12 @@ export const config = { ${tokens.textWrapperHeight}: 2.5rem; ${tokens.textWrapperPadding}: 0.688rem 0.875rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -221,12 +258,12 @@ export const config = { ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.75rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${tokens.iconButtonRadius}: 0.5rem; ${tokens.iconButtonSegmentationRadius}: 0.125rem; @@ -236,12 +273,12 @@ export const config = { ${tokens.textWrapperHeight}: 2rem; ${tokens.textWrapperPadding}: 0.563rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -257,8 +294,8 @@ export const config = { }, inputBackgroundType: { fill: css` - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimary}; `, clear: css` ${tokens.backgroundColor}: transparent; diff --git a/packages/sdds-netology/src/components/Pagination/Pagination.config.ts b/packages/sdds-netology/src/components/Pagination/Pagination.config.ts index 5b9af725836..43d506508d9 100644 --- a/packages/sdds-netology/src/components/Pagination/Pagination.config.ts +++ b/packages/sdds-netology/src/components/Pagination/Pagination.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,129 +39,129 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; ${paginationTokens.inputBorderColor}:transparent; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, }, size: { l: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-l-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-l-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-l-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-l-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyL.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyL.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyL.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyLBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyL.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyL.lineHeight}; ${paginationTokens.buttonHeight}: 3.5rem; ${paginationTokens.buttonWidth}: 3rem; @@ -167,12 +197,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, m: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; @@ -208,12 +238,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; @@ -249,12 +279,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, xs: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-xs-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-xs-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-xs-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyXS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyXS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyXS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyXSBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyXS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyXS.lineHeight}; ${paginationTokens.buttonHeight}: 2rem; ${paginationTokens.paginationInputWidth}: 2.5rem; diff --git a/packages/sdds-netology/src/components/Popover/Popover.config.ts b/packages/sdds-netology/src/components/Popover/Popover.config.ts index 2f9acaf14e8..9139b3c63f9 100644 --- a/packages/sdds-netology/src/components/Popover/Popover.config.ts +++ b/packages/sdds-netology/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Progress/Progress.config.ts b/packages/sdds-netology/src/components/Progress/Progress.config.ts index a103dc32807..ec8fd101122 100644 --- a/packages/sdds-netology/src/components/Progress/Progress.config.ts +++ b/packages/sdds-netology/src/components/Progress/Progress.config.ts @@ -1,3 +1,14 @@ +import { + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +19,39 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, primary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, success: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, error: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/sdds-netology/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/sdds-netology/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index 6a6449f99a4..3ae17f3287e 100644 --- a/packages/sdds-netology/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/sdds-netology/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +70,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -63,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -76,12 +96,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -89,12 +109,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -102,12 +122,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -115,12 +135,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -128,12 +148,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Radiobox/Radiobox.config.ts b/packages/sdds-netology/src/components/Radiobox/Radiobox.config.ts index d5fc23d48b3..81f4c5a83d1 100644 --- a/packages/sdds-netology/src/components/Radiobox/Radiobox.config.ts +++ b/packages/sdds-netology/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,18 +37,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,18 +60,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${radioboxTokens.margin}: 0; @@ -66,19 +82,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.625rem; ${radioboxTokens.contentTopOffset}: 0.0625rem; ${radioboxTokens.contentLeftOffset}: 0.75rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyL.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -86,74 +102,74 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${radioboxTokens.fillColor}: var(--text-primary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPrimary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${radioboxTokens.fillColor}: var(--text-secondary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textSecondary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${radioboxTokens.fillColor}: var(--text-tertiary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textTertiary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${radioboxTokens.fillColor}: var(--text-paragraph); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textParagraph}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${radioboxTokens.fillColor}: var(--text-positive); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPositive}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${radioboxTokens.fillColor}: var(--text-warning); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textWarning}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated negative: css` - ${radioboxTokens.fillColor}: var(--text-negative); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textNegative}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -164,7 +180,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-netology/src/components/Range/Range.clear.config.ts b/packages/sdds-netology/src/components/Range/Range.clear.config.ts index 53faca3d526..a007d818229 100644 --- a/packages/sdds-netology/src/components/Range/Range.clear.config.ts +++ b/packages/sdds-netology/src/components/Range/Range.clear.config.ts @@ -1,3 +1,31 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -14,57 +42,57 @@ export const config = { ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); - - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldBackgroundColorHover}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -75,15 +103,15 @@ export const config = { ${tokens.textFieldBackgroundSuccessColorHover}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; `, }, size: { @@ -91,12 +119,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.5rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -104,24 +132,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -139,22 +167,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -168,12 +196,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -181,24 +209,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -216,22 +244,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -245,12 +273,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -258,24 +286,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -293,22 +321,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -322,12 +350,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -335,24 +363,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -370,22 +398,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -399,12 +427,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -412,24 +440,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -447,22 +475,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -475,10 +503,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -491,12 +519,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -515,12 +543,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -538,16 +566,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Range/Range.config.ts b/packages/sdds-netology/src/components/Range/Range.config.ts index af1793bb835..f682f67f4d4 100644 --- a/packages/sdds-netology/src/components/Range/Range.config.ts +++ b/packages/sdds-netology/src/components/Range/Range.config.ts @@ -1,3 +1,32 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,55 +39,55 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorHover}: var(--surface-transparent-negative-hover); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorHover}: var(--surface-transparent-positive-hover); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -66,12 +95,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -79,24 +108,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 4rem; @@ -114,22 +143,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -142,12 +171,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -155,24 +184,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -190,22 +219,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -218,12 +247,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -231,24 +260,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -266,22 +295,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -294,12 +323,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -307,24 +336,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -342,22 +371,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -370,12 +399,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -383,24 +412,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -418,22 +447,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -445,10 +474,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -461,12 +490,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -485,12 +514,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -508,16 +537,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Rating/Rating.config.ts b/packages/sdds-netology/src/components/Rating/Rating.config.ts index 79e9f36f886..5b42836a7a9 100644 --- a/packages/sdds-netology/src/components/Rating/Rating.config.ts +++ b/packages/sdds-netology/src/components/Rating/Rating.config.ts @@ -1,3 +1,36 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + bodyXXS, + bodyXXSBold, + dsplL, + dsplLBold, + dsplM, + dsplMBold, + dsplS, + dsplSBold, + h1, + h1Bold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +41,36 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; // TODO: change with token data-yellow, when it will be added to theme ${tokens.iconColor}: #F3A912; - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { l: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -48,19 +81,19 @@ export const config = { m: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -71,19 +104,19 @@ export const config = { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -94,19 +127,19 @@ export const config = { xs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.iconMarginBottom}: 0.125rem; ${tokens.contentGap}: 0.375rem; @@ -121,19 +154,19 @@ export const config = { xxs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.fontFamily}: ${bodyXXS.fontFamily}; + ${tokens.fontSize}: ${bodyXXS.fontSize}; + ${tokens.fontStyle}: ${bodyXXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.contentGap}: 0.375rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -146,19 +179,19 @@ export const config = { h1: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tokens.fontFamily}: ${h1.fontFamily}; + ${tokens.fontSize}: ${h1.fontSize}; + ${tokens.fontStyle}: ${h1.fontStyle}; + ${tokens.fontWeight}: ${h1Bold.fontWeight}; + ${tokens.letterSpacing}: ${h1.letterSpacing}; + ${tokens.lineHeight}: ${h1.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.helperTextFontFamily}: ${bodyM.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyM.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyM.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyM.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyM.lineHeight}; ${tokens.contentGap}: 1rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -177,19 +210,19 @@ export const config = { h2: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tokens.fontFamily}: ${h2.fontFamily}; + ${tokens.fontSize}: ${h2.fontSize}; + ${tokens.fontStyle}: ${h2.fontStyle}; + ${tokens.fontWeight}: ${h2Bold.fontWeight}; + ${tokens.letterSpacing}: ${h2.letterSpacing}; + ${tokens.lineHeight}: ${h2.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.875rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -208,19 +241,19 @@ export const config = { h3: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.fontFamily}: ${h3.fontFamily}; + ${tokens.fontSize}: ${h3.fontSize}; + ${tokens.fontStyle}: ${h3.fontStyle}; + ${tokens.fontWeight}: ${h3Bold.fontWeight}; + ${tokens.letterSpacing}: ${h3.letterSpacing}; + ${tokens.lineHeight}: ${h3.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.75rem; ${tokens.singleIconContentGap}: 0.375rem; @@ -239,19 +272,19 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.fontFamily}: ${h4.fontFamily}; + ${tokens.fontSize}: ${h4.fontSize}; + ${tokens.fontStyle}: ${h4.fontStyle}; + ${tokens.fontWeight}: ${h4Bold.fontWeight}; + ${tokens.letterSpacing}: ${h4.letterSpacing}; + ${tokens.lineHeight}: ${h4.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -270,19 +303,19 @@ export const config = { h5: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.fontFamily}: ${h5.fontFamily}; + ${tokens.fontSize}: ${h5.fontSize}; + ${tokens.fontStyle}: ${h5.fontStyle}; + ${tokens.fontWeight}: ${h5Bold.fontWeight}; + ${tokens.letterSpacing}: ${h5.letterSpacing}; + ${tokens.lineHeight}: ${h5.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -301,19 +334,19 @@ export const config = { h6: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tokens.fontFamily}: ${h6.fontFamily}; + ${tokens.fontSize}: ${h6.fontSize}; + ${tokens.fontStyle}: ${h6.fontStyle}; + ${tokens.fontWeight}: ${h6Bold.fontWeight}; + ${tokens.letterSpacing}: ${h6.letterSpacing}; + ${tokens.lineHeight}: ${h6.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -332,19 +365,19 @@ export const config = { displayL: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${tokens.fontFamily}: ${dsplL.fontFamily}; + ${tokens.fontSize}: ${dsplL.fontSize}; + ${tokens.fontStyle}: ${dsplL.fontStyle}; + ${tokens.fontWeight}: ${dsplLBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplL.letterSpacing}; + ${tokens.lineHeight}: ${dsplL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.helperTextFontFamily}: ${h3.fontFamily}; + ${tokens.helperTextFontSize}: ${h3.fontSize}; + ${tokens.helperTextFontStyle}: ${h3.fontStyle}; + ${tokens.helperTextFontWeight}: ${h3.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing}; + ${tokens.helperTextLineHeight}: ${h3.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -363,19 +396,19 @@ export const config = { displayM: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${tokens.fontFamily}: ${dsplM.fontFamily}; + ${tokens.fontSize}: ${dsplM.fontSize}; + ${tokens.fontStyle}: ${dsplM.fontStyle}; + ${tokens.fontWeight}: ${dsplMBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplM.letterSpacing}; + ${tokens.lineHeight}: ${dsplM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -394,19 +427,19 @@ export const config = { displayS: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${dsplS.fontFamily}; + ${tokens.fontSize}: ${dsplS.fontSize}; + ${tokens.fontStyle}: ${dsplS.fontStyle}; + ${tokens.fontWeight}: ${dsplSBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplS.letterSpacing}; + ${tokens.lineHeight}: ${dsplS.lineHeight}; + + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; diff --git a/packages/sdds-netology/src/components/Scrollbar/Scrollbar.config.ts b/packages/sdds-netology/src/components/Scrollbar/Scrollbar.config.ts index 0220aa026dc..8c0f7d28ebb 100644 --- a/packages/sdds-netology/src/components/Scrollbar/Scrollbar.config.ts +++ b/packages/sdds-netology/src/components/Scrollbar/Scrollbar.config.ts @@ -1,8 +1,10 @@ +import { surfaceTransparentPrimary, surfaceTransparentTertiary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; + export const config = { view: { default: { - trackColor: 'var(--surface-transparent-primary)', - thumbColor: 'var(--surface-transparent-tertiary)', + trackColor: surfaceTransparentPrimary, + thumbColor: surfaceTransparentTertiary, }, }, size: { diff --git a/packages/sdds-netology/src/components/Segment/SegmentGroup.config.ts b/packages/sdds-netology/src/components/Segment/SegmentGroup.config.ts index b03cb7140c7..6cadabcffc5 100644 --- a/packages/sdds-netology/src/components/Segment/SegmentGroup.config.ts +++ b/packages/sdds-netology/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +9,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -74,7 +75,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary}; `, }, orientation: { diff --git a/packages/sdds-netology/src/components/Segment/SegmentItem.config.ts b/packages/sdds-netology/src/components/Segment/SegmentItem.config.ts index 550c948b39d..9f4da5059ab 100644 --- a/packages/sdds-netology/src/components/Segment/SegmentItem.config.ts +++ b/packages/sdds-netology/src/components/Segment/SegmentItem.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,68 +32,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -83,12 +107,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${segmentTokens.itemBorderRadius}: 0.625rem; @@ -100,12 +124,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -117,12 +141,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, l: css` ${segmentTokens.itemBorderRadius}: 0.875rem; @@ -134,12 +158,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, xl: css` ${segmentTokens.itemBorderRadius}: 1rem; @@ -151,12 +175,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-netology/src/components/Select/Select.config.ts b/packages/sdds-netology/src/components/Select/Select.config.ts index 8757252fb41..b9af673af76 100644 --- a/packages/sdds-netology/src/components/Select/Select.config.ts +++ b/packages/sdds-netology/src/components/Select/Select.config.ts @@ -1,3 +1,75 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + onLightTextSecondaryActive, + onLightTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,328 +82,328 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, accent: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-accent); - ${tokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-accent-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceAccent}; + ${tokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, secondary: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, clear: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-active); - ${tokens.buttonBackgroundColor}: var(--surface-clear); - ${tokens.buttonBackgroundColorHover}: var(--surface-clear); - ${tokens.buttonBackgroundColorActive}: var(--surface-clear); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryActive}; + ${tokens.buttonBackgroundColor}: ${surfaceClear}; + ${tokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${tokens.buttonBackgroundColorActive}: ${surfaceClear}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, dark: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-transparent-deep); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceTransparentDeep}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceTransparentDeepHover}; + ${tokens.buttonBackgroundColorActive}:${onLightSurfaceTransparentDeepActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, black: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, white: css` - ${tokens.buttonColor}: var(--on-light-text-primary); - ${tokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-light-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-light-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-light-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-light-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-dark-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); - - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onLightTextPrimary}; + ${tokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onLightTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onLightTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onLightTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onLightTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onDarkSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onDarkSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}:${onDarkSurfaceSolidDefaultActive}; + + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -351,20 +423,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -372,12 +444,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -400,12 +472,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; ${tokens.targetHeight}: 3.5rem; @@ -431,19 +503,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -476,20 +548,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -497,12 +569,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -525,12 +597,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -556,19 +628,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -601,20 +673,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -622,12 +694,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -650,12 +722,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; @@ -681,19 +753,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -726,20 +798,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -747,12 +819,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -775,12 +847,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2rem; @@ -806,19 +878,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -838,69 +910,69 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--on-dark-text-primary); - ${tokens.textFieldChipColorHover}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${onDarkTextPrimary}; + ${tokens.textFieldChipColorHover}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -913,12 +985,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -937,12 +1009,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -962,12 +1034,12 @@ export const config = { true: css` ${tokens.disclosureIconOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts index 75d2ee7a606..17afc2eba2d 100644 --- a/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-netology/src/components/Skeleton/LineSkeleton.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + dsplL, + dsplM, + dsplS, + h1, + h2, + h3, + h4, + h5, + h6, + surfaceSkeletonDeepGradient, + surfaceSkeletonGradient, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textL, + textM, + textS, + textXS, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, skeletonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,88 +32,88 @@ export const config = { variations: { view: { default: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient, var(--surface-skeleton-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, lighter: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient-lighter, var(--surface-skeleton-deep-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonDeepGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, }, size: { bodyL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size); + ${skeletonTokens.lineHeight}: ${bodyL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyL.fontSize}; `, bodyM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size); + ${skeletonTokens.lineHeight}: ${bodyM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyM.fontSize}; `, bodyS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size); + ${skeletonTokens.lineHeight}: ${bodyS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyS.fontSize}; `, bodyXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXS.fontSize}; `, bodyXXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXXS.fontSize}; `, dsplL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size); + ${skeletonTokens.lineHeight}: ${dsplL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplL.fontSize}; `, dsplM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size); + ${skeletonTokens.lineHeight}: ${dsplM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplM.fontSize}; `, dsplS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size); + ${skeletonTokens.lineHeight}: ${dsplS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplS.fontSize}; `, h1: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size); + ${skeletonTokens.lineHeight}: ${h1.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h1.fontSize}; `, h2: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size); + ${skeletonTokens.lineHeight}: ${h2.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h2.fontSize}; `, h3: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size); + ${skeletonTokens.lineHeight}: ${h3.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h3.fontSize}; `, h4: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size); + ${skeletonTokens.lineHeight}: ${h4.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h4.fontSize}; `, h5: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); + ${skeletonTokens.lineHeight}: ${h5.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h5.fontSize}; `, h6: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + ${skeletonTokens.lineHeight}: ${h6.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h6.fontSize}; `, textL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); + ${skeletonTokens.lineHeight}: ${textL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textL.fontSize}; `, textM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size); + ${skeletonTokens.lineHeight}: ${textM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textM.fontSize}; `, textS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size); + ${skeletonTokens.lineHeight}: ${textS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textS.fontSize}; `, textXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size); + ${skeletonTokens.lineHeight}: ${textXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textXS.fontSize}; `, }, }, diff --git a/packages/sdds-netology/src/components/Slider/Slider.config.ts b/packages/sdds-netology/src/components/Slider/Slider.config.ts index c171f134490..85c4626ab7e 100644 --- a/packages/sdds-netology/src/components/Slider/Slider.config.ts +++ b/packages/sdds-netology/src/components/Slider/Slider.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + surfaceAccent, + surfaceAccentGradient, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +25,70 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, gradient: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent-gradient); + ${sliderTokens.fillColor}: ${surfaceAccentGradient}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, }, size: { @@ -85,24 +102,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -119,12 +136,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -136,24 +153,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -170,12 +187,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -187,24 +204,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -221,12 +238,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-netology/src/components/Steps/Steps.config.ts b/packages/sdds-netology/src/components/Steps/Steps.config.ts index ee1ee5e1e98..0ad8c4b2180 100644 --- a/packages/sdds-netology/src/components/Steps/Steps.config.ts +++ b/packages/sdds-netology/src/components/Steps/Steps.config.ts @@ -1,42 +1,72 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -47,10 +77,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -60,26 +90,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -100,33 +130,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.5rem; ${tokens.largeBulletIndentHeight}: 1.25rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyL.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyM.fontFamily}; + ${tokens.contentFontSize}: ${bodyM.fontSize}; + ${tokens.contentFontStyle}: ${bodyM.fontStyle}; + ${tokens.contentFontWeight}: ${bodyM.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyM.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -147,33 +177,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -194,33 +224,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -241,33 +271,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 0.75rem; ${tokens.largeBulletIndentHeight}: 0.5rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -278,8 +308,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/sdds-netology/src/components/Switch/Switch.config.ts b/packages/sdds-netology/src/components/Switch/Switch.config.ts index 8a08bd686d8..15ba42c4ee2 100644 --- a/packages/sdds-netology/src/components/Switch/Switch.config.ts +++ b/packages/sdds-netology/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,50 +24,50 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -83,17 +96,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -104,7 +117,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-netology/src/components/Table/Table.config.ts b/packages/sdds-netology/src/components/Table/Table.config.ts index 770fa22b6d8..afa42ebe35a 100644 --- a/packages/sdds-netology/src/components/Table/Table.config.ts +++ b/packages/sdds-netology/src/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + surfaceTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +28,12 @@ export const config = { }, size: { l: css` - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.headerRowHeight}: 3.125rem; ${tokens.rowHeight}: 3.125rem; @@ -31,9 +43,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.5rem; ${tokens.editableCellIconButtonWidth}: 3rem; @@ -42,18 +54,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.875rem; ${tokens.editableCellInputPadding}: 0 0.75rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.75rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.875rem; @@ -63,12 +75,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -76,20 +88,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.5rem 0.875rem; ${tokens.selectControlPanelGap}: 0.5rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight}; `, m: css` - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.headerRowHeight}: 2.75rem; ${tokens.rowHeight}: 2.75rem; @@ -99,9 +111,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.375rem; ${tokens.editableCellIconButtonWidth}: 2.5rem; @@ -110,18 +122,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.625rem; ${tokens.editableCellInputPadding}: 0 0.625rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.75rem; @@ -131,12 +143,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -144,20 +156,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.75rem; ${tokens.selectControlPanelGap}: 0.625rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, s: css` - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.headerRowHeight}: 2.125rem; ${tokens.rowHeight}: 2.125rem; @@ -167,9 +179,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.25rem; ${tokens.editableCellIconButtonWidth}: 2rem; @@ -178,18 +190,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.5rem; ${tokens.editableCellInputPadding}: 0 0.375rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.25rem 0.5rem; ${tokens.buttonHeight}: 1.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.625rem; @@ -199,12 +211,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.25rem 0 0; ${tokens.selectItemIconSize}: 1rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 0.875rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -212,12 +224,12 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.5rem; ${tokens.selectControlPanelGap}: 0.25rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 8b2e20b8ce7..dd82f97a8c7 100644 --- a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,13 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,78 +18,78 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; diff --git a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index a7252a1f7c0..8d01730d5df 100644 --- a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h1, + h2, + h3, + h4, + h5, + h6, + inverseTextPrimary, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,106 +34,106 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--on-dark-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--on-dark-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${onDarkTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${onDarkTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -123,12 +149,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -142,12 +168,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -161,12 +187,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -180,12 +206,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -197,12 +223,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tabsTokens.fontFamily}: ${h6.fontFamily}; + ${tabsTokens.fontSize}: ${h6.fontSize}; + ${tabsTokens.fontStyle}: ${h6.fontStyle}; + ${tabsTokens.fontWeight}: ${h6.fontWeight}; + ${tabsTokens.letterSpacing}: ${h6.letterSpacing}; + ${tabsTokens.lineHeight}: ${h6.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -214,12 +240,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -231,12 +257,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -248,12 +274,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -265,12 +291,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -282,12 +308,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts index bc3e5edf5c1..f66f4ab2ec6 100644 --- a/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-netology/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +16,36 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-netology/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/sdds-netology/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index c1b4b62e4a1..771aca7ac0b 100644 --- a/packages/sdds-netology/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/sdds-netology/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabItem.config.ts index c819eeeacbd..65c46ea5191 100644 --- a/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +24,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +65,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -69,12 +85,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -89,12 +105,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -109,12 +125,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabs.config.ts index 78eba3f047c..33ea68546ea 100644 --- a/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/sdds-netology/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-netology/src/components/TextArea/TextArea.clear.config.ts b/packages/sdds-netology/src/components/TextArea/TextArea.clear.config.ts index 87abb38a0d7..c606ff27f3e 100644 --- a/packages/sdds-netology/src/components/TextArea/TextArea.clear.config.ts +++ b/packages/sdds-netology/src/components/TextArea/TextArea.clear.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -19,31 +42,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` ${tokens.inputBackgroundColor}: transparent; @@ -56,31 +79,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-positive); - ${tokens.inputColorFocus}: var(--text-positive); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPositive}; + ${tokens.inputColorFocus}: ${textPositive}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` ${tokens.inputBackgroundColor}: transparent; @@ -93,31 +116,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-warning); - ${tokens.inputColorFocus}: var(--text-warning); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textWarning}; + ${tokens.inputColorFocus}: ${textWarning}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` ${tokens.inputBackgroundColor}: transparent; @@ -130,31 +153,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-negative); - ${tokens.inputColorFocus}: var(--text-negative); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textNegative}; + ${tokens.inputColorFocus}: ${textNegative}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -184,30 +207,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -225,12 +248,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -258,30 +281,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -299,12 +322,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -332,30 +355,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -373,12 +396,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -406,30 +429,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -447,12 +470,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -480,30 +503,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -521,24 +544,24 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; ${tokens.tooltipBoxShadow}: var( --shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08) ); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -551,12 +574,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -575,12 +598,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -598,9 +621,9 @@ export const config = { }, readOnly: { true: css` - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-netology/src/components/TextArea/TextArea.config.ts b/packages/sdds-netology/src/components/TextArea/TextArea.config.ts index 9a056369045..8c7fcb5461d 100644 --- a/packages/sdds-netology/src/components/TextArea/TextArea.config.ts +++ b/packages/sdds-netology/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,41 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,172 +46,172 @@ export const config = { variations: { view: { default: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-primary); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-primary); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-positive); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-positive); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-positive); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textPositive}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-warning); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-warning); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-warning); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textWarning}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-negative); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-negative); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -202,30 +240,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -243,12 +281,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.751rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -275,30 +313,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -316,12 +354,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -348,30 +386,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -391,12 +429,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -423,30 +461,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.5rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +502,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -496,30 +534,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.375rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -537,20 +575,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -563,12 +601,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -587,12 +625,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -606,18 +644,18 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-netology/src/components/TextField/TextField.clear.config.ts b/packages/sdds-netology/src/components/TextField/TextField.clear.config.ts index 31d1a8122e8..294eef53038 100644 --- a/packages/sdds-netology/src/components/TextField/TextField.clear.config.ts +++ b/packages/sdds-netology/src/components/TextField/TextField.clear.config.ts @@ -1,3 +1,52 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,132 +58,132 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-positive); + ${tokens.color}: ${textPositive}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-positive); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textPositive}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-positive); - ${tokens.contentSlotColorHover}: var(--text-positive-hover); - ${tokens.contentSlotColorActive}: var(--text-positive-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPositive}; + ${tokens.contentSlotColorHover}: ${textPositiveHover}; + ${tokens.contentSlotColorActive}: ${textPositiveActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-warning); + ${tokens.color}: ${textWarning}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-warning); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textWarning}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-warning); - ${tokens.contentSlotColorHover}: var(--text-warning-hover); - ${tokens.contentSlotColorActive}: var(--text-warning-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textWarning}; + ${tokens.contentSlotColorHover}: ${textWarningHover}; + ${tokens.contentSlotColorActive}: ${textWarningActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-negative); + ${tokens.color}: ${textNegative}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-negative); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textNegative}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -151,40 +200,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -200,19 +249,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -235,40 +284,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -283,12 +332,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -311,40 +360,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -359,12 +408,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -387,40 +436,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -435,12 +484,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -463,40 +512,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -511,12 +560,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -529,126 +578,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -661,12 +710,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -685,12 +734,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -709,13 +758,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); + ${tokens.colorReadOnly}: ${textPrimary}; ${tokens.backgroundColorReadOnly}: transparent; - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-netology/src/components/TextField/TextField.config.ts b/packages/sdds-netology/src/components/TextField/TextField.config.ts index c029fa0c4a6..7d7d0d9676c 100644 --- a/packages/sdds-netology/src/components/TextField/TextField.config.ts +++ b/packages/sdds-netology/src/components/TextField/TextField.config.ts @@ -1,3 +1,56 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,120 +62,120 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-positive); - ${tokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPositive}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-warning); - ${tokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentWarning}; + ${tokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -135,40 +188,40 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -184,19 +237,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -219,20 +272,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -240,20 +293,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -266,12 +319,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -297,20 +350,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -318,20 +371,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -344,12 +397,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -375,20 +428,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -396,20 +449,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -422,12 +475,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -453,20 +506,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -474,20 +527,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -500,12 +553,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -520,126 +573,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -652,12 +705,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -676,12 +729,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -700,13 +753,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-netology/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/sdds-netology/src/components/TextFieldGroup/TextFieldGroup.config.ts index 200d2e26ac4..ea17fdfec0b 100644 --- a/packages/sdds-netology/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/sdds-netology/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.textFieldDefaultRadius}: 0.75rem; @@ -77,28 +78,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -111,12 +112,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -133,28 +134,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -167,12 +168,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.textFieldSegmentedRadius}: 0.125rem; @@ -189,28 +190,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -223,12 +224,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts b/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts index a33164279df..5d0f5e43d10 100644 --- a/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts +++ b/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + textAccent, + textNegative, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,10 +35,10 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -25,45 +51,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -76,45 +102,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-positive); - ${tokens.textFieldContentSlotColorHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColor}: ${textPositive}; + ${tokens.textFieldContentSlotColorHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorActive}: ${textPositiveActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-positive); + ${tokens.scaleValueColor}: ${textPositive}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -127,45 +153,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -178,50 +204,50 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-negative); + ${tokens.scaleValueColor}: ${textNegative}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -235,38 +261,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -288,12 +314,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -305,38 +331,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -358,12 +384,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -375,38 +401,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -428,12 +454,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -445,38 +471,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -498,12 +524,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -515,38 +541,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -568,20 +594,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -594,12 +620,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -618,12 +644,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -641,12 +667,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.config.ts b/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.config.ts index c63635d3490..cdf3ccf05ce 100644 --- a/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.config.ts +++ b/packages/sdds-netology/src/components/TextFieldSlider/TextFieldSlider.config.ts @@ -1,3 +1,35 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,207 +41,207 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; - ${tokens.textFieldBorderColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldBorderColorHover}: var(--text-secondary); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldBorderColorHover}: ${textSecondary}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-positive-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-warning-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -223,38 +255,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -276,12 +308,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -293,38 +325,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -346,12 +378,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -363,38 +395,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -416,12 +448,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -433,38 +465,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -486,12 +518,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -503,38 +535,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -556,20 +588,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -582,12 +614,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -606,12 +638,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -629,12 +661,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-netology/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-netology/src/components/TimePicker/TimePicker.config.ts index b86cc9da0bd..9ca595a169e 100644 --- a/packages/sdds-netology/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-netology/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,45 +33,45 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; - ${tokens.labelColor}: var(--text-primary); + ${tokens.labelColor}: ${textPrimary}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); + ${tokens.timePickerShadow}: ${shadowDownSoftS}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -63,12 +86,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -80,12 +103,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -103,34 +126,34 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.5rem; @@ -146,12 +169,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -163,12 +186,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -186,34 +209,34 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -229,12 +252,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -246,12 +269,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -269,34 +292,34 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.813rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -312,12 +335,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -329,12 +352,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -352,34 +375,34 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -450,13 +473,13 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Toast/Toast.config.ts b/packages/sdds-netology/src/components/Toast/Toast.config.ts index 9678f1dd594..d3ef5af5abc 100644 --- a/packages/sdds-netology/src/components/Toast/Toast.config.ts +++ b/packages/sdds-netology/src/components/Toast/Toast.config.ts @@ -1,3 +1,17 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,49 +23,49 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-positive); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textPositive}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-negative); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textNegative}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary); + ${toastTokens.closeIconColor}: ${onDarkTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary); + ${toastTokens.closeIconColor}: ${onLightTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextSecondary}; `, }, size: { @@ -59,12 +73,12 @@ export const config = { ${toastTokens.borderRadius}: 0.75rem; ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/sdds-netology/src/components/Toolbar/Toolbar.config.ts b/packages/sdds-netology/src/components/Toolbar/Toolbar.config.ts index 89581b0d6bf..198fea34fbd 100644 --- a/packages/sdds-netology/src/components/Toolbar/Toolbar.config.ts +++ b/packages/sdds-netology/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/sdds-netology/src/components/Tooltip/Tooltip.config.ts b/packages/sdds-netology/src/components/Tooltip/Tooltip.config.ts index 2ca59cef4c5..2a818a1670a 100644 --- a/packages/sdds-netology/src/components/Tooltip/Tooltip.config.ts +++ b/packages/sdds-netology/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,4 @@ +import { bodyS, bodyXS, surfaceSolidCardBrightness, textPrimary } from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +17,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -30,7 +31,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -41,12 +42,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -55,15 +56,15 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.color}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-netology/src/components/Tree/Tree.config.ts b/packages/sdds-netology/src/components/Tree/Tree.config.ts index e8cbfce73a6..6247adf76cc 100644 --- a/packages/sdds-netology/src/components/Tree/Tree.config.ts +++ b/packages/sdds-netology/src/components/Tree/Tree.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,24 +24,24 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -53,12 +69,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.itemHeight}: 3.5rem; @@ -84,12 +100,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.itemHeight}: 3rem; @@ -115,12 +131,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -146,12 +162,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.itemHeight}: 2rem; @@ -177,12 +193,12 @@ export const config = { ${tokens.checkboxInnerSize}: 0.875rem; ${tokens.checkboxBorderRadius}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Typography/Body.config.ts b/packages/sdds-netology/src/components/Typography/Body.config.ts index 23927fdf18c..722cd63ecde 100644 --- a/packages/sdds-netology/src/components/Typography/Body.config.ts +++ b/packages/sdds-netology/src/components/Typography/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Typography/Dspl.config.ts b/packages/sdds-netology/src/components/Typography/Dspl.config.ts index 3fb1245a027..b9cb5399c31 100644 --- a/packages/sdds-netology/src/components/Typography/Dspl.config.ts +++ b/packages/sdds-netology/src/components/Typography/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +18,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +38,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +58,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Typography/Heading.config.ts b/packages/sdds-netology/src/components/Typography/Heading.config.ts index 77f16729129..3d40a09e33d 100644 --- a/packages/sdds-netology/src/components/Typography/Heading.config.ts +++ b/packages/sdds-netology/src/components/Typography/Heading.config.ts @@ -1,3 +1,23 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, + h6, + h6Bold, + h6Medium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configH1 = { @@ -7,14 +27,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +46,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +65,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +84,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +103,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, @@ -102,14 +122,14 @@ export const configH6 = { variations: { size: { h6: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + ${typographyTokens.typoFontFamily}: ${h6.fontFamily}; + ${typographyTokens.typoFontSize}: ${h6.fontSize}; + ${typographyTokens.typoFontStyle}: ${h6.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h6.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h6Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h6Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h6.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h6.lineHeight}; `, }, }, diff --git a/packages/sdds-netology/src/components/Typography/Text.config.ts b/packages/sdds-netology/src/components/Typography/Text.config.ts index 542bc09a87d..0c0104fb3e6 100644 --- a/packages/sdds-netology/src/components/Typography/Text.config.ts +++ b/packages/sdds-netology/src/components/Typography/Text.config.ts @@ -1,3 +1,17 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/plasma-themes/tokens/plasma_b2c'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +21,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +41,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +61,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +81,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, From ab24f9c9c4cf8511ff434a7c2ef37f35fad92830 Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 16:29:31 +0300 Subject: [PATCH 17/24] chore(sdds-os): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 138 +-- .../src/components/Attach/Attach.config.ts | 745 +++++++++-------- .../Autocomplete/Autocomplete.config.ts | 456 +++++----- .../src/components/Badge/Badge.config.ts | 136 +-- .../Breadcrumbs/Breadcrumbs.config.ts | 21 +- .../src/components/Button/Button.config.ts | 246 +++--- .../ButtonGroup/ButtonGroup.config.ts | 288 ++++--- .../components/Calendar/Calendar.config.ts | 243 +++--- .../Calendar/CalendarDouble.config.ts | 243 +++--- .../src/components/Cell/Cell.config.ts | 129 +-- .../components/Checkbox/Checkbox.config.ts | 78 +- .../components/ChipGroup/ChipGroup.config.ts | 76 +- .../components/Combobox/Combobox.config.ts | 604 +++++++------- .../src/components/Counter/Counter.config.ts | 103 ++- .../DatePicker/DatePicker.config.ts | 589 +++++++------ .../src/components/Divider/Divider.config.ts | 14 +- .../src/components/Drawer/Drawer.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 83 +- .../components/Dropzone/Dropzone.config.ts | 53 +- .../EmbedIconButton/EmbedIconButton.config.ts | 125 +-- .../EmptyState/EmptyState.config.ts | 49 +- .../IconButton/IconButton.config.ts | 170 ++-- .../LinkButton/LinkButton.config.ts | 207 +++-- .../src/components/List/List.config.ts | 52 +- .../src/components/Modal/Modal.config.ts | 20 +- .../Notification/Notification.config.ts | 196 +++-- .../src/components/Popover/Popover.config.ts | 5 +- .../components/Progress/Progress.config.ts | 53 +- .../ProgressBarCircular.config.ts | 66 +- .../components/Radiobox/Radiobox.config.ts | 66 +- .../src/components/Range/Range.config.ts | 286 ++++--- .../components/Scrollbar/Scrollbar.config.ts | 6 +- .../src/components/Select/Select.config.ts | 648 +++++++------- .../src/components/Steps/Steps.config.ts | 223 ++--- .../src/components/Switch/Switch.config.ts | 79 +- .../HorizontalIconTabItem.config.ts | 23 +- .../horizontal/HorizontalTabItem.config.ts | 88 +- .../Tabs/horizontal/HorizontalTabs.config.ts | 36 +- .../vertical/VerticalIconTabItem.config.ts | 23 +- .../Tabs/vertical/VerticalTabItem.config.ts | 62 +- .../Tabs/vertical/VerticalTabs.config.ts | 17 +- .../TextArea/TextArea.clear.config.ts | 259 +++--- .../components/TextArea/TextArea.config.ts | 411 ++++----- .../TextField/TextField.clear.config.ts | 789 ++++++++++-------- .../components/TextField/TextField.config.ts | 616 +++++++------- .../TextFieldGroup/TextFieldGroup.config.ts | 193 ++--- .../src/components/Toolbar/Toolbar.config.ts | 11 +- .../src/components/Tooltip/Tooltip.config.ts | 33 +- .../src/components/Tree/Tree.config.ts | 68 +- .../src/components/Typography/Body.config.ts | 97 ++- .../src/components/Typography/Dspl.config.ts | 59 +- .../components/Typography/Heading.config.ts | 97 ++- .../src/components/Typography/Text.config.ts | 78 +- 53 files changed, 5217 insertions(+), 4253 deletions(-) diff --git a/packages/sdds-os/src/components/Accordion/Accordion.config.ts b/packages/sdds-os/src/components/Accordion/Accordion.config.ts index 92366e71545..5a7cd66b5f2 100644 --- a/packages/sdds-os/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-os/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyMBold, + bodyS, + bodySBold, + h3, + h3Bold, + h4, + h4Bold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,12 +27,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, @@ -24,14 +40,14 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -43,19 +59,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -64,19 +80,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -85,19 +101,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 0.688rem; @@ -105,19 +121,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/sdds-os/src/components/Attach/Attach.config.ts b/packages/sdds-os/src/components/Attach/Attach.config.ts index 736bb5f4961..a238351c70f 100644 --- a/packages/sdds-os/src/components/Attach/Attach.config.ts +++ b/packages/sdds-os/src/components/Attach/Attach.config.ts @@ -1,3 +1,52 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,439 +59,439 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.buttonColorActive}: var(--text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.buttonColorHover}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.buttonColorActive}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.iconButtonColorHover}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.iconButtonColorActive}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary-hover); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.buttonColorActive}: var(--text-primary-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColorHover}: ${textPrimaryHover}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.buttonColorActive}: ${textPrimaryActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary-hover); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonColorActive}: var(--text-primary-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonColorActive}: ${textPrimaryActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, positive: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-positive); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfacePositive}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, warning: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-warning); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceWarning}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, negative: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-negative); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceNegative}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-negative-active); - - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; + + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, dark: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, black: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, white: css` - ${attachTokens.buttonColor}: var(--on-light-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.buttonColor}: ${onLightTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -457,12 +506,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -481,37 +530,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -520,12 +569,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -547,12 +596,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -571,37 +620,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -610,12 +659,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/sdds-os/src/components/Autocomplete/Autocomplete.config.ts b/packages/sdds-os/src/components/Autocomplete/Autocomplete.config.ts index 4c11b1eafa9..0ff3ebbaca8 100644 --- a/packages/sdds-os/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/sdds-os/src/components/Autocomplete/Autocomplete.config.ts @@ -1,3 +1,33 @@ +import { + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,172 +39,172 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-positive); - ${tokens.textFieldDividerColorHover}: var(--surface-positive); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfacePositive}; + ${tokens.textFieldDividerColorHover}: ${surfacePositive}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-warning); - ${tokens.textFieldDividerColorHover}: var(--surface-warning); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceWarning}; + ${tokens.textFieldDividerColorHover}: ${surfaceWarning}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--surface-negative); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${surfaceNegative}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, }, size: { @@ -193,21 +223,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -215,12 +245,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -240,12 +270,12 @@ export const config = { ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; ${tokens.emptyStateGap}: 0.375rem; @@ -268,21 +298,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -290,12 +320,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -315,12 +345,12 @@ export const config = { ${tokens.itemPadding}: 0.6875rem 0.75rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -331,22 +361,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -359,12 +389,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -383,12 +413,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -406,14 +436,14 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary}; `, }, }, diff --git a/packages/sdds-os/src/components/Badge/Badge.config.ts b/packages/sdds-os/src/components/Badge/Badge.config.ts index 6506d5673ce..815d91d1b9f 100644 --- a/packages/sdds-os/src/components/Badge/Badge.config.ts +++ b/packages/sdds-os/src/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +36,67 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -78,12 +106,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -97,12 +125,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -116,12 +144,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -137,7 +165,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/sdds-os/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/sdds-os/src/components/Breadcrumbs/Breadcrumbs.config.ts index e8264f1bcf1..57bd38043d2 100644 --- a/packages/sdds-os/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/sdds-os/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,4 @@ +import { bodyM, bodyMBold, surfaceAccent, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,23 +9,23 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/sdds-os/src/components/Button/Button.config.ts b/packages/sdds-os/src/components/Button/Button.config.ts index 592f2dc569b..5902f16b5d1 100644 --- a/packages/sdds-os/src/components/Button/Button.config.ts +++ b/packages/sdds-os/src/components/Button/Button.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,104 +53,104 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, positive: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, negative: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -115,12 +159,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 0.875rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -136,12 +180,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -157,12 +201,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -178,12 +222,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -199,12 +243,12 @@ export const config = { ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: 0.375rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 0.75rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -223,7 +267,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/sdds-os/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/sdds-os/src/components/ButtonGroup/ButtonGroup.config.ts index 64e34b5e545..ce6b21017df 100644 --- a/packages/sdds-os/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/sdds-os/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,124 +56,124 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, positive: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, negative: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; `, }, size: { @@ -136,12 +184,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3.5rem; ${buttonGroupTokens.buttonPadding}: 1.5rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, m: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -151,12 +199,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -165,12 +213,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -179,12 +227,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -193,12 +241,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 1.5rem; ${buttonGroupTokens.buttonPadding}: 0.625rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-os/src/components/Calendar/Calendar.config.ts b/packages/sdds-os/src/components/Calendar/Calendar.config.ts index 9338d99fbd9..1d1d60cdb7a 100644 --- a/packages/sdds-os/src/components/Calendar/Calendar.config.ts +++ b/packages/sdds-os/src/components/Calendar/Calendar.config.ts @@ -1,3 +1,22 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + h4, + h4Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,38 +28,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -51,46 +70,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +119,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -120,46 +139,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -169,13 +188,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -193,12 +212,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -207,7 +226,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -218,12 +237,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -232,7 +251,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-os/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-os/src/components/Calendar/CalendarDouble.config.ts index b8b28e9ac91..e07a62075ca 100644 --- a/packages/sdds-os/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-os/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,22 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + h4, + h4Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -52,46 +71,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +120,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -121,46 +140,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -170,13 +189,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -194,12 +213,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -208,7 +227,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -219,12 +238,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -233,7 +252,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-os/src/components/Cell/Cell.config.ts b/packages/sdds-os/src/components/Cell/Cell.config.ts index edbdec86fa0..863c5cdd2af 100644 --- a/packages/sdds-os/src/components/Cell/Cell.config.ts +++ b/packages/sdds-os/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -87,26 +88,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-os/src/components/Checkbox/Checkbox.config.ts b/packages/sdds-os/src/components/Checkbox/Checkbox.config.ts index 3263cc31bcd..54a3954251e 100644 --- a/packages/sdds-os/src/components/Checkbox/Checkbox.config.ts +++ b/packages/sdds-os/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,13 @@ +import { + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + textAccent, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,18 +27,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, s: css` ${checkboxTokens.margin}: 0; @@ -39,36 +49,36 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, }, view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, negative: css` - ${checkboxTokens.fillColor}: var(--text-negative); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textNegative}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-negative); + ${checkboxTokens.triggerBorderColor}: ${textNegative}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -79,7 +89,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-os/src/components/ChipGroup/ChipGroup.config.ts b/packages/sdds-os/src/components/ChipGroup/ChipGroup.config.ts index 2d1561c2269..717ebcd5135 100644 --- a/packages/sdds-os/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/sdds-os/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,19 @@ +import { + bodyM, + bodyS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +24,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +55,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -60,12 +76,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/sdds-os/src/components/Combobox/Combobox.config.ts b/packages/sdds-os/src/components/Combobox/Combobox.config.ts index 5446b960655..7471ce9e1d0 100644 --- a/packages/sdds-os/src/components/Combobox/Combobox.config.ts +++ b/packages/sdds-os/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,33 @@ +import { + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,221 +39,221 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -243,20 +273,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -264,12 +294,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -292,12 +322,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -319,19 +349,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -364,20 +394,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -385,12 +415,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -413,12 +443,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 0.625rem 0.875rem 0.625rem 0.875rem; ${tokens.padding}: 0.125rem; @@ -440,19 +470,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -472,22 +502,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -500,12 +530,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -524,12 +554,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -547,13 +577,13 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-os/src/components/Counter/Counter.config.ts b/packages/sdds-os/src/components/Counter/Counter.config.ts index 140aa43a57f..7705ff9c93e 100644 --- a/packages/sdds-os/src/components/Counter/Counter.config.ts +++ b/packages/sdds-os/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,32 +23,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -41,56 +56,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-os/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-os/src/components/DatePicker/DatePicker.config.ts index 639224086ca..b8e3e5eab2f 100644 --- a/packages/sdds-os/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-os/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,38 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + h4, + h4Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,110 +43,110 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -120,12 +155,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -135,12 +170,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -170,30 +205,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -211,46 +246,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -261,25 +296,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -290,12 +325,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -305,12 +340,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -340,30 +375,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -381,46 +416,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -431,25 +466,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -466,12 +501,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -480,7 +515,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -491,12 +526,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -505,15 +540,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -526,12 +561,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -550,12 +585,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -573,16 +608,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-os/src/components/Divider/Divider.config.ts b/packages/sdds-os/src/components/Divider/Divider.config.ts index df0449d5c06..7017366e5f0 100644 --- a/packages/sdds-os/src/components/Divider/Divider.config.ts +++ b/packages/sdds-os/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/sdds-os/src/components/Drawer/Drawer.config.ts b/packages/sdds-os/src/components/Drawer/Drawer.config.ts index b0b00b15040..83738937d1c 100644 --- a/packages/sdds-os/src/components/Drawer/Drawer.config.ts +++ b/packages/sdds-os/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/sdds-os/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-os/src/components/Dropdown/Dropdown.config.ts index 9235e39c811..8fd8e2f903e 100644 --- a/packages/sdds-os/src/components/Dropdown/Dropdown.config.ts +++ b/packages/sdds-os/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,10 @@ +import { + bodyL, + bodyM, + bodyS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -24,12 +31,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -37,12 +44,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.padding}: 0.125rem; @@ -61,12 +68,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -74,12 +81,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 0.125rem; @@ -98,12 +105,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -111,18 +118,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/sdds-os/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-os/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..7d3738dd3bc 100644 --- a/packages/sdds-os/src/components/Dropzone/Dropzone.config.ts +++ b/packages/sdds-os/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-os/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/sdds-os/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..7dd8b06b9a8 100644 --- a/packages/sdds-os/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/sdds-os/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-os/src/components/EmptyState/EmptyState.config.ts b/packages/sdds-os/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..0c0dd9eef62 100644 --- a/packages/sdds-os/src/components/EmptyState/EmptyState.config.ts +++ b/packages/sdds-os/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-os/src/components/IconButton/IconButton.config.ts b/packages/sdds-os/src/components/IconButton/IconButton.config.ts index 2120bbe91cc..b1dbb087e9d 100644 --- a/packages/sdds-os/src/components/IconButton/IconButton.config.ts +++ b/packages/sdds-os/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,74 +49,74 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, positive: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, negative: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -85,12 +125,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3.5rem; ${iconButtonTokens.iconButtonPadding}: 1.5rem; ${iconButtonTokens.iconButtonRadius}: 0.875rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -100,12 +140,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -115,12 +155,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -130,12 +170,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -148,7 +188,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-os/src/components/LinkButton/LinkButton.config.ts b/packages/sdds-os/src/components/LinkButton/LinkButton.config.ts index 39bd9b9182a..255e791a3ff 100644 --- a/packages/sdds-os/src/components/LinkButton/LinkButton.config.ts +++ b/packages/sdds-os/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,36 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,81 +41,81 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, info: css` - ${linkButtonTokens.linkButtonColor}: var(--text-info); - ${linkButtonTokens.linkButtonIconColor}: var(--text-info); - ${linkButtonTokens.linkButtonTextColor}: var(--text-info); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-info-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-info-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-info-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-info-active); + ${linkButtonTokens.linkButtonColor}: ${textInfo}; + ${linkButtonTokens.linkButtonIconColor}: ${textInfo}; + ${linkButtonTokens.linkButtonTextColor}: ${textInfo}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textInfoHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textInfoActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textInfoHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textInfoActive}; `, }, size: { @@ -90,12 +123,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3.5rem; ${linkButtonTokens.linkButtonPadding}: 1rem 0; ${linkButtonTokens.linkButtonRadius}: 0.875rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -109,12 +142,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -128,12 +161,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -147,12 +180,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/sdds-os/src/components/List/List.config.ts b/packages/sdds-os/src/components/List/List.config.ts index d69cd319d75..863f1d0f81b 100644 --- a/packages/sdds-os/src/components/List/List.config.ts +++ b/packages/sdds-os/src/components/List/List.config.ts @@ -1,3 +1,11 @@ +import { + bodyL, + bodyM, + bodyS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +16,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +37,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -46,12 +54,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -63,12 +71,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-os/src/components/Modal/Modal.config.ts b/packages/sdds-os/src/components/Modal/Modal.config.ts index 8b107b98ea3..2c1ead47af0 100644 --- a/packages/sdds-os/src/components/Modal/Modal.config.ts +++ b/packages/sdds-os/src/components/Modal/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,16 +16,16 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-os/src/components/Notification/Notification.config.ts b/packages/sdds-os/src/components/Notification/Notification.config.ts index 3963e77e1e2..a071017dccb 100644 --- a/packages/sdds-os/src/components/Notification/Notification.config.ts +++ b/packages/sdds-os/src/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +20,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +52,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +106,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +160,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +214,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +268,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/sdds-os/src/components/Popover/Popover.config.ts b/packages/sdds-os/src/components/Popover/Popover.config.ts index 2f9acaf14e8..cccb36ae708 100644 --- a/packages/sdds-os/src/components/Popover/Popover.config.ts +++ b/packages/sdds-os/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/sdds-os/src/components/Progress/Progress.config.ts b/packages/sdds-os/src/components/Progress/Progress.config.ts index c4c58c51f85..2f0c58e3dce 100644 --- a/packages/sdds-os/src/components/Progress/Progress.config.ts +++ b/packages/sdds-os/src/components/Progress/Progress.config.ts @@ -1,3 +1,14 @@ +import { + surfaceAccentGradient, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +19,39 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, info: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-info); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceInfo}; + ${progressTokens.valueColor}: ${textTertiary}; `, positive: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, negative: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/sdds-os/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/sdds-os/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index f2022f49e01..07b85ee978e 100644 --- a/packages/sdds-os/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/sdds-os/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,15 @@ +import { + bodyM, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +20,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +62,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/sdds-os/src/components/Radiobox/Radiobox.config.ts b/packages/sdds-os/src/components/Radiobox/Radiobox.config.ts index 40226b330b1..0c23cfb0103 100644 --- a/packages/sdds-os/src/components/Radiobox/Radiobox.config.ts +++ b/packages/sdds-os/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,11 @@ +import { + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + textAccent, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,11 +17,11 @@ export const config = { variations: { view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -28,18 +36,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, s: css` ${radioboxTokens.margin}: 0; @@ -51,18 +59,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, }, disabled: { @@ -72,7 +80,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-os/src/components/Range/Range.config.ts b/packages/sdds-os/src/components/Range/Range.config.ts index a8b1630d876..392157dfdc0 100644 --- a/packages/sdds-os/src/components/Range/Range.config.ts +++ b/packages/sdds-os/src/components/Range/Range.config.ts @@ -1,3 +1,31 @@ +import { + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,55 +38,55 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorHover}: var(--surface-transparent-negative-hover); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorHover}: var(--surface-transparent-positive-hover); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -66,12 +94,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -79,24 +107,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -114,22 +142,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -142,12 +170,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -155,24 +183,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -190,22 +218,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -217,10 +245,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -233,12 +261,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -257,12 +285,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -280,16 +308,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-os/src/components/Scrollbar/Scrollbar.config.ts b/packages/sdds-os/src/components/Scrollbar/Scrollbar.config.ts index 0220aa026dc..5b76f28f17d 100644 --- a/packages/sdds-os/src/components/Scrollbar/Scrollbar.config.ts +++ b/packages/sdds-os/src/components/Scrollbar/Scrollbar.config.ts @@ -1,8 +1,10 @@ +import { surfaceTransparentPrimary, surfaceTransparentTertiary } from '@salutejs/sdds-themes/tokens/sdds_os'; + export const config = { view: { default: { - trackColor: 'var(--surface-transparent-primary)', - thumbColor: 'var(--surface-transparent-tertiary)', + trackColor: surfaceTransparentPrimary, + thumbColor: surfaceTransparentTertiary, }, }, size: { diff --git a/packages/sdds-os/src/components/Select/Select.config.ts b/packages/sdds-os/src/components/Select/Select.config.ts index 26a816fc9c3..d3808eae32e 100644 --- a/packages/sdds-os/src/components/Select/Select.config.ts +++ b/packages/sdds-os/src/components/Select/Select.config.ts @@ -1,3 +1,53 @@ +import { + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,192 +60,192 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -215,20 +265,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -236,12 +286,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -264,12 +314,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -295,19 +345,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -340,20 +390,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -361,12 +411,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -389,12 +439,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; @@ -420,19 +470,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -452,69 +502,69 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--on-dark-text-primary); - ${tokens.textFieldChipColorHover}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${onDarkTextPrimary}; + ${tokens.textFieldChipColorHover}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -527,12 +577,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -551,12 +601,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -576,12 +626,12 @@ export const config = { true: css` ${tokens.disclosureIconOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-os/src/components/Steps/Steps.config.ts b/packages/sdds-os/src/components/Steps/Steps.config.ts index 1252416b0bf..d57d27040b2 100644 --- a/packages/sdds-os/src/components/Steps/Steps.config.ts +++ b/packages/sdds-os/src/components/Steps/Steps.config.ts @@ -1,42 +1,71 @@ +import { + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -47,10 +76,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -60,26 +89,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -100,33 +129,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -147,33 +176,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -184,8 +213,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/sdds-os/src/components/Switch/Switch.config.ts b/packages/sdds-os/src/components/Switch/Switch.config.ts index 508ea52d010..a34fc0fbf1f 100644 --- a/packages/sdds-os/src/components/Switch/Switch.config.ts +++ b/packages/sdds-os/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,34 +24,34 @@ export const config = { variations: { size: { l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -67,17 +80,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -88,7 +101,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-os/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-os/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 35c60d99b0c..60e563778f6 100644 --- a/packages/sdds-os/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-os/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/sdds-os/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-os/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index f91f0b76c55..adf330c0c09 100644 --- a/packages/sdds-os/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-os/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,15 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,52 +20,52 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -69,12 +81,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -88,12 +100,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, diff --git a/packages/sdds-os/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-os/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 4be96906109..bf7c9e788a6 100644 --- a/packages/sdds-os/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-os/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +16,36 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-os/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/sdds-os/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index 38becf8c6dc..50c64af32c2 100644 --- a/packages/sdds-os/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/sdds-os/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/sdds-os/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-os/src/components/Tabs/vertical/VerticalTabItem.config.ts index 0a545a28f37..46568f0a34c 100644 --- a/packages/sdds-os/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-os/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,15 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +20,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +61,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -69,12 +81,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/sdds-os/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/sdds-os/src/components/Tabs/vertical/VerticalTabs.config.ts index 20c97af662b..b5103420d8d 100644 --- a/packages/sdds-os/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/sdds-os/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-os/src/components/TextArea/TextArea.clear.config.ts b/packages/sdds-os/src/components/TextArea/TextArea.clear.config.ts index 22b45fdd328..c1f3526e28d 100644 --- a/packages/sdds-os/src/components/TextArea/TextArea.clear.config.ts +++ b/packages/sdds-os/src/components/TextArea/TextArea.clear.config.ts @@ -1,3 +1,22 @@ +import { + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -19,31 +38,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` ${tokens.inputBackgroundColor}: transparent; @@ -56,31 +75,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-warning); - ${tokens.inputColorFocus}: var(--text-warning); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textWarning}; + ${tokens.inputColorFocus}: ${textWarning}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` ${tokens.inputBackgroundColor}: transparent; @@ -93,31 +112,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-negative); - ${tokens.inputColorFocus}: var(--text-negative); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textNegative}; + ${tokens.inputColorFocus}: ${textNegative}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -147,30 +166,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -188,12 +207,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -221,30 +240,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -262,24 +281,24 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; ${tokens.tooltipBoxShadow}: var( --shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08) ); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -292,12 +311,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -316,12 +335,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -339,9 +358,9 @@ export const config = { }, readOnly: { true: css` - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-os/src/components/TextArea/TextArea.config.ts b/packages/sdds-os/src/components/TextArea/TextArea.config.ts index e3d77552da4..2c22a706fcb 100644 --- a/packages/sdds-os/src/components/TextArea/TextArea.config.ts +++ b/packages/sdds-os/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,34 @@ +import { + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + textAccent, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,130 +39,130 @@ export const config = { variations: { view: { default: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-primary); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-primary); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-warning); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-warning); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-warning); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textWarning}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-negative); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-negative); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -160,30 +191,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -203,12 +234,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -235,30 +266,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.5rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -276,20 +307,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -302,12 +333,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -326,12 +357,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -345,18 +376,18 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-os/src/components/TextField/TextField.clear.config.ts b/packages/sdds-os/src/components/TextField/TextField.clear.config.ts index 31d1a8122e8..08233dabee4 100644 --- a/packages/sdds-os/src/components/TextField/TextField.clear.config.ts +++ b/packages/sdds-os/src/components/TextField/TextField.clear.config.ts @@ -1,3 +1,52 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,132 +58,132 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-positive); + ${tokens.color}: ${textPositive}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-positive); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textPositive}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-positive); - ${tokens.contentSlotColorHover}: var(--text-positive-hover); - ${tokens.contentSlotColorActive}: var(--text-positive-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPositive}; + ${tokens.contentSlotColorHover}: ${textPositiveHover}; + ${tokens.contentSlotColorActive}: ${textPositiveActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-warning); + ${tokens.color}: ${textWarning}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-warning); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textWarning}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-warning); - ${tokens.contentSlotColorHover}: var(--text-warning-hover); - ${tokens.contentSlotColorActive}: var(--text-warning-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textWarning}; + ${tokens.contentSlotColorHover}: ${textWarningHover}; + ${tokens.contentSlotColorActive}: ${textWarningActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-negative); + ${tokens.color}: ${textNegative}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-negative); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textNegative}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -151,40 +200,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -200,19 +249,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -235,40 +284,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -283,12 +332,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -311,40 +360,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -359,12 +408,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -387,40 +436,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -435,12 +484,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -463,40 +512,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -511,12 +560,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -529,126 +578,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -661,12 +710,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -685,12 +734,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -709,13 +758,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); + ${tokens.colorReadOnly}: ${textPrimary}; ${tokens.backgroundColorReadOnly}: transparent; - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-os/src/components/TextField/TextField.config.ts b/packages/sdds-os/src/components/TextField/TextField.config.ts index a6c1942228c..708db11921d 100644 --- a/packages/sdds-os/src/components/TextField/TextField.config.ts +++ b/packages/sdds-os/src/components/TextField/TextField.config.ts @@ -1,3 +1,55 @@ +import { + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,120 +61,120 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-positive); - ${tokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPositive}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-warning); - ${tokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentWarning}; + ${tokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -140,20 +192,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -161,20 +213,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -187,12 +239,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -218,20 +270,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -239,20 +291,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -265,12 +317,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -285,126 +337,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -417,12 +469,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -441,12 +493,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -465,13 +517,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-os/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/sdds-os/src/components/TextFieldGroup/TextFieldGroup.config.ts index 1daa3e4f6dd..9c5aa52bd08 100644 --- a/packages/sdds-os/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/sdds-os/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.textFieldDefaultRadius}: 0.75rem; @@ -77,28 +78,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -111,12 +112,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -133,28 +134,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -167,12 +168,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.textFieldSegmentedRadius}: 0.125rem; @@ -189,28 +190,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -223,12 +224,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-os/src/components/Toolbar/Toolbar.config.ts b/packages/sdds-os/src/components/Toolbar/Toolbar.config.ts index 5b4b52090ff..4f50f4c118c 100644 --- a/packages/sdds-os/src/components/Toolbar/Toolbar.config.ts +++ b/packages/sdds-os/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/sdds-os/src/components/Tooltip/Tooltip.config.ts b/packages/sdds-os/src/components/Tooltip/Tooltip.config.ts index 2ca59cef4c5..d360c7a34da 100644 --- a/packages/sdds-os/src/components/Tooltip/Tooltip.config.ts +++ b/packages/sdds-os/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,4 @@ +import { bodyS, bodyXS, surfaceSolidCardBrightness, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +17,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -30,7 +31,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -41,12 +42,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -55,15 +56,15 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.color}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-os/src/components/Tree/Tree.config.ts b/packages/sdds-os/src/components/Tree/Tree.config.ts index 17970e0eee0..3eb0f3023d4 100644 --- a/packages/sdds-os/src/components/Tree/Tree.config.ts +++ b/packages/sdds-os/src/components/Tree/Tree.config.ts @@ -1,3 +1,17 @@ +import { + bodyM, + bodyS, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,24 +22,24 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -53,12 +67,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -84,12 +98,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, }, }, diff --git a/packages/sdds-os/src/components/Typography/Body.config.ts b/packages/sdds-os/src/components/Typography/Body.config.ts index 23927fdf18c..ab4d92b4793 100644 --- a/packages/sdds-os/src/components/Typography/Body.config.ts +++ b/packages/sdds-os/src/components/Typography/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-os/src/components/Typography/Dspl.config.ts b/packages/sdds-os/src/components/Typography/Dspl.config.ts index 3fb1245a027..bacc0a269d8 100644 --- a/packages/sdds-os/src/components/Typography/Dspl.config.ts +++ b/packages/sdds-os/src/components/Typography/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +18,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +38,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +58,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/sdds-os/src/components/Typography/Heading.config.ts b/packages/sdds-os/src/components/Typography/Heading.config.ts index 39eeb6b5bb9..7b56e525806 100644 --- a/packages/sdds-os/src/components/Typography/Heading.config.ts +++ b/packages/sdds-os/src/components/Typography/Heading.config.ts @@ -1,3 +1,20 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configH1 = { @@ -7,14 +24,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +43,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +62,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +81,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +100,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, diff --git a/packages/sdds-os/src/components/Typography/Text.config.ts b/packages/sdds-os/src/components/Typography/Text.config.ts index 542bc09a87d..0ea1deac335 100644 --- a/packages/sdds-os/src/components/Typography/Text.config.ts +++ b/packages/sdds-os/src/components/Typography/Text.config.ts @@ -1,3 +1,17 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_os'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +21,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +41,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +61,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +81,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, From c5c959bb3ffeaef1cb7bbbeec8632fe5a679b34f Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 16:27:13 +0300 Subject: [PATCH 18/24] chore(sdds-platform-ai): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 190 +-- .../src/components/Attach/Attach.config.ts | 153 +-- .../src/components/Badge/Badge.config.ts | 123 +- .../Breadcrumbs/Breadcrumbs.config.ts | 21 +- .../src/components/Button/Button.config.ts | 223 ++-- .../ButtonGroup/ButtonGroup.config.ts | 220 ++-- .../Calendar/CalendarBase.config.ts | 460 ++++---- .../Calendar/CalendarDouble.config.ts | 460 ++++---- .../src/components/Card/Card.config.ts | 3 +- .../components/Carousel/Carousel.config.ts | 24 +- .../src/components/Cell/Cell.config.ts | 169 +-- .../components/Checkbox/Checkbox.config.ts | 78 +- .../components/ChipGroup/ChipGroup.config.ts | 76 +- .../components/Combobox/Combobox.config.ts | 530 +++++---- .../src/components/Counter/Counter.config.ts | 103 +- .../DatePicker/DatePicker.clear.config.ts | 1035 +++++++++-------- .../DatePicker/DatePicker.config.ts | 1022 ++++++++-------- .../DateTimePicker/DateTimePicker.config.ts | 954 +++++++-------- .../src/components/Divider/Divider.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 33 +- .../components/Dropzone/Dropzone.config.ts | 53 +- .../EmbedIconButton/EmbedIconButton.config.ts | 125 +- .../EmptyState/EmptyState.config.ts | 49 +- .../src/components/File/File.config.ts | 109 +- .../IconButton/IconButton.config.ts | 172 +-- .../InformationWrapper.config.ts | 150 +-- .../LinkButton/LinkButton.config.ts | 210 ++-- .../src/components/List/List.config.ts | 26 +- .../src/components/Loader/Loader.config.ts | 181 +-- .../src/components/Modal/Modal.config.ts | 20 +- .../src/components/Note/Note.config.ts | 74 +- .../Notification/Notification.config.ts | 196 ++-- .../Pagination/Pagination.config.ts | 103 +- .../src/components/Popover/Popover.config.ts | 5 +- .../components/Progress/Progress.config.ts | 53 +- .../ProgressBarCircular.config.ts | 146 ++- .../components/Radiobox/Radiobox.config.ts | 66 +- .../src/components/Rating/Rating.config.ts | 387 +++--- .../components/Scrollbar/Scrollbar.config.ts | 6 +- .../components/Segment/SegmentGroup.config.ts | 11 +- .../components/Segment/SegmentItem.config.ts | 128 +- .../src/components/Select/Select.config.ts | 823 +++++++------ .../src/components/Slider/Slider.config.ts | 209 ++-- .../src/components/Steps/Steps.config.ts | 169 +-- .../src/components/Switch/Switch.config.ts | 78 +- .../HorizontalIconTabItem.config.ts | 35 +- .../horizontal/HorizontalTabItem.config.ts | 152 +-- .../Tabs/horizontal/HorizontalTabs.config.ts | 36 +- .../vertical/VerticalIconTabItem.config.ts | 23 +- .../Tabs/vertical/VerticalTabItem.config.ts | 48 +- .../Tabs/vertical/VerticalTabs.config.ts | 17 +- .../components/TextArea/TextArea.config.ts | 277 +++-- .../components/TextField/TextField.config.ts | 582 ++++----- .../TextFieldGroup/TextFieldGroup.config.ts | 49 +- .../TimePicker/TimePicker.config.ts | 331 +++--- .../src/components/Toast/Toast.config.ts | 48 +- .../src/components/Toolbar/Toolbar.config.ts | 11 +- .../src/components/Tooltip/Tooltip.config.ts | 33 +- .../src/components/Typography/Body.config.ts | 97 +- .../src/components/Typography/Dspl.config.ts | 59 +- .../components/Typography/Heading.config.ts | 116 +- .../src/components/Typography/Text.config.ts | 78 +- 62 files changed, 6266 insertions(+), 5166 deletions(-) diff --git a/packages/sdds-platform-ai/src/components/Accordion/Accordion.config.ts b/packages/sdds-platform-ai/src/components/Accordion/Accordion.config.ts index 8ec6bce2c72..99986f87496 100644 --- a/packages/sdds-platform-ai/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-platform-ai/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyMBold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,12 +31,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, @@ -24,14 +44,14 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -43,19 +63,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h2: css` ${accordionTokens.accordionItemPaddingVertical}: 1rem; @@ -64,19 +84,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h2Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -85,19 +105,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 0.688rem; @@ -105,19 +125,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h5: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -125,19 +145,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h6: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -145,19 +165,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h6Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Attach/Attach.config.ts b/packages/sdds-platform-ai/src/components/Attach/Attach.config.ts index 71696ce2a58..db200d5733a 100644 --- a/packages/sdds-platform-ai/src/components/Attach/Attach.config.ts +++ b/packages/sdds-platform-ai/src/components/Attach/Attach.config.ts @@ -1,3 +1,22 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + surfaceAccent, + surfaceClear, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,55 +29,55 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -73,12 +92,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -97,37 +116,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -136,12 +155,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/sdds-platform-ai/src/components/Badge/Badge.config.ts b/packages/sdds-platform-ai/src/components/Badge/Badge.config.ts index 1cfdd609848..c50fa014669 100644 --- a/packages/sdds-platform-ai/src/components/Badge/Badge.config.ts +++ b/packages/sdds-platform-ai/src/components/Badge/Badge.config.ts @@ -1,3 +1,28 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPrimary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,58 +33,58 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -69,12 +94,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -88,12 +113,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -107,12 +132,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -131,7 +156,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/sdds-platform-ai/src/components/Breadcrumbs/Breadcrumbs.config.ts index e44c8694f9c..93eae4182cd 100644 --- a/packages/sdds-platform-ai/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/sdds-platform-ai/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,4 @@ +import { bodyS, surfaceAccent, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +9,11 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; `, @@ -21,12 +22,12 @@ export const config = { s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-font-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyS.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Button/Button.config.ts b/packages/sdds-platform-ai/src/components/Button/Button.config.ts index 9739dea2040..ce339bc657f 100644 --- a/packages/sdds-platform-ai/src/components/Button/Button.config.ts +++ b/packages/sdds-platform-ai/src/components/Button/Button.config.ts @@ -1,3 +1,44 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + outlineSolidDefault, + surfaceAccent, + surfaceAccentGradient, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,111 +50,111 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent-gradient); + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccentGradient}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; - ${buttonTokens.buttonValueColor}: var(--text-secondary); + ${buttonTokens.buttonValueColor}: ${textSecondary}; ${buttonTokens.buttonBackgroundColor}: transparent; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBorderColor}: var(--outline-solid-default); - ${buttonTokens.buttonBorderColorHover}: var(--outline-solid-default); - ${buttonTokens.buttonBorderColorActive}: var(--outline-solid-default); + ${buttonTokens.buttonBorderColor}: ${outlineSolidDefault}; + ${buttonTokens.buttonBorderColorHover}: ${outlineSolidDefault}; + ${buttonTokens.buttonBorderColorActive}: ${outlineSolidDefault}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, positive: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, negative: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--text-accent); - ${buttonTokens.buttonTextColor}: var(--text-accent); - ${buttonTokens.buttonIconColor}: var(--text-accent); + ${buttonTokens.buttonColor}: ${textAccent}; + ${buttonTokens.buttonTextColor}: ${textAccent}; + ${buttonTokens.buttonIconColor}: ${textAccent}; - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); `, }, @@ -123,12 +164,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.75rem; ${buttonTokens.buttonRadius}: 2rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.5rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -145,12 +186,12 @@ export const config = { ${buttonTokens.buttonPadding}: 1.75rem; ${buttonTokens.buttonRadius}: 1.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -166,12 +207,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 1.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -187,12 +228,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 1.375rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -211,7 +252,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/sdds-platform-ai/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/sdds-platform-ai/src/components/ButtonGroup/ButtonGroup.config.ts index bd126b46b80..94286176646 100644 --- a/packages/sdds-platform-ai/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/sdds-platform-ai/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + outlineSolidDefault, + surfaceAccentGradient, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,111 +48,111 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent-gradient); + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccentGradient}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; ${buttonGroupTokens.buttonBackgroundColor}: transparent; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonBorderColor}: var(--outline-solid-default); - ${buttonGroupTokens.buttonBorderColorHover}: var(--outline-solid-default); - ${buttonGroupTokens.buttonBorderColorActive}: var(--outline-solid-default); + ${buttonGroupTokens.buttonBorderColor}: ${outlineSolidDefault}; + ${buttonGroupTokens.buttonBorderColorHover}: ${outlineSolidDefault}; + ${buttonGroupTokens.buttonBorderColorActive}: ${outlineSolidDefault}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, positive: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, negative: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--text-accent); - ${buttonGroupTokens.buttonTextColor}: var(--text-accent); - ${buttonGroupTokens.buttonIconColor}: var(--text-accent); + ${buttonGroupTokens.buttonColor}: ${textAccent}; + ${buttonGroupTokens.buttonTextColor}: ${textAccent}; + ${buttonGroupTokens.buttonIconColor}: ${textAccent}; - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimaryActive}; - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); `, }, @@ -124,12 +164,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 4rem; ${buttonGroupTokens.buttonPadding}: 1.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, l: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.375rem; @@ -139,12 +179,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3.5rem; ${buttonGroupTokens.buttonPadding}: 1.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, m: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -154,12 +194,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -168,12 +208,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-platform-ai/src/components/Calendar/CalendarBase.config.ts b/packages/sdds-platform-ai/src/components/Calendar/CalendarBase.config.ts index fc0a15388db..b5b134b6cb1 100644 --- a/packages/sdds-platform-ai/src/components/Calendar/CalendarBase.config.ts +++ b/packages/sdds-platform-ai/src/components/Calendar/CalendarBase.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,38 +35,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -51,46 +77,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +126,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 4rem; ${calendarBaseTokens.iconButtonWidth}: 4rem; @@ -120,46 +146,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -169,13 +195,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3.5rem; ${calendarBaseTokens.iconButtonWidth}: 3.5rem; @@ -189,46 +215,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -238,13 +264,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -258,46 +284,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -307,13 +333,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -327,46 +353,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -376,13 +402,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; @@ -400,12 +426,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -414,7 +440,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -425,12 +451,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -439,7 +465,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-platform-ai/src/components/Calendar/CalendarDouble.config.ts index 70c9a8be880..52c0e0a0afd 100644 --- a/packages/sdds-platform-ai/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-platform-ai/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,39 +35,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -52,46 +78,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +127,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 4rem; ${calendarDoubleTokens.iconButtonWidth}: 4rem; @@ -121,46 +147,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -170,13 +196,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; @@ -190,46 +216,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -239,13 +265,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -259,46 +285,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -308,13 +334,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -328,46 +354,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +403,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; @@ -401,12 +427,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -415,7 +441,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -426,12 +452,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -440,7 +466,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Card/Card.config.ts b/packages/sdds-platform-ai/src/components/Card/Card.config.ts index 6be9eae7b98..8122eb3eb01 100644 --- a/packages/sdds-platform-ai/src/components/Card/Card.config.ts +++ b/packages/sdds-platform-ai/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,7 +9,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/sdds-platform-ai/src/components/Carousel/Carousel.config.ts b/packages/sdds-platform-ai/src/components/Carousel/Carousel.config.ts index f3fd82e4491..e2bdb8b9b81 100644 --- a/packages/sdds-platform-ai/src/components/Carousel/Carousel.config.ts +++ b/packages/sdds-platform-ai/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +16,14 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary); - ${tokens.paginationDotActiveBackground}: var(--surface-solid-default); - ${tokens.controlIconButtonColor}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.controlIconButtonColorHover}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.controlIconButtonColorActive}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary}; + ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault}; + ${tokens.controlIconButtonColor}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.controlIconButtonColorHover}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.controlIconButtonColorActive}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, }, size: { diff --git a/packages/sdds-platform-ai/src/components/Cell/Cell.config.ts b/packages/sdds-platform-ai/src/components/Cell/Cell.config.ts index 6588088c11f..eb393c2cb54 100644 --- a/packages/sdds-platform-ai/src/components/Cell/Cell.config.ts +++ b/packages/sdds-platform-ai/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -87,26 +88,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -119,26 +120,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Checkbox/Checkbox.config.ts b/packages/sdds-platform-ai/src/components/Checkbox/Checkbox.config.ts index 82b5f1765ff..3da6b203d88 100644 --- a/packages/sdds-platform-ai/src/components/Checkbox/Checkbox.config.ts +++ b/packages/sdds-platform-ai/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,13 @@ +import { + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + textAccent, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,18 +27,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -39,36 +49,36 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, negative: css` - ${checkboxTokens.fillColor}: var(--text-negative); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textNegative}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-negative); + ${checkboxTokens.triggerBorderColor}: ${textNegative}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -79,7 +89,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/ChipGroup/ChipGroup.config.ts b/packages/sdds-platform-ai/src/components/ChipGroup/ChipGroup.config.ts index cbc8710c415..754412b9209 100644 --- a/packages/sdds-platform-ai/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/sdds-platform-ai/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,19 @@ +import { + bodyM, + bodyXXS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +24,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +55,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -60,12 +76,12 @@ export const config = { ${tokens.chipHeight}: 1.25rem; ${tokens.chipPadding}: 0 0.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.chipFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXXS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.125rem; diff --git a/packages/sdds-platform-ai/src/components/Combobox/Combobox.config.ts b/packages/sdds-platform-ai/src/components/Combobox/Combobox.config.ts index 2a1c439defa..a0f39cf983d 100644 --- a/packages/sdds-platform-ai/src/components/Combobox/Combobox.config.ts +++ b/packages/sdds-platform-ai/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,33 @@ +import { + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,221 +39,221 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -243,20 +273,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -264,12 +294,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -292,12 +322,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -319,19 +349,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -351,22 +381,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -379,12 +409,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -403,12 +433,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -426,13 +456,13 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Counter/Counter.config.ts b/packages/sdds-platform-ai/src/components/Counter/Counter.config.ts index 2de4a9a64c7..a6b350fad65 100644 --- a/packages/sdds-platform-ai/src/components/Counter/Counter.config.ts +++ b/packages/sdds-platform-ai/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,32 +23,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -41,56 +56,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/DatePicker/DatePicker.clear.config.ts b/packages/sdds-platform-ai/src/components/DatePicker/DatePicker.clear.config.ts index c2e334a638a..c198d907266 100644 --- a/packages/sdds-platform-ai/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/sdds-platform-ai/src/components/DatePicker/DatePicker.clear.config.ts @@ -1,3 +1,46 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,64 +51,64 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); + ${tokens.outlineFocusColor}: ${surfaceAccent}; ${tokens.background}: transparent; ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.focusColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.focusColor}: ${textAccent}; ${tokens.textFieldBackgroundColor}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -74,76 +117,76 @@ export const config = { ${tokens.textFieldBackgroundSuccessColor}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -152,12 +195,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -167,12 +210,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -198,30 +241,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}:0.82rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; @@ -239,46 +282,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -289,25 +332,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -318,12 +361,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -333,12 +376,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -369,30 +412,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -410,46 +453,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -460,25 +503,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -489,12 +532,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -504,12 +547,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -540,30 +583,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -581,46 +624,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -631,25 +674,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -660,12 +703,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -675,12 +718,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -711,30 +754,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -752,46 +795,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -802,25 +845,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -831,12 +874,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -846,12 +889,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -882,30 +925,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -923,46 +966,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -973,25 +1016,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -1008,12 +1051,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1022,7 +1065,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1033,12 +1076,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1047,15 +1090,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1068,12 +1111,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1092,12 +1135,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1116,15 +1159,15 @@ export const config = { readOnly: { true: css` ${tokens.backgroundReadOnly}: transparent; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-platform-ai/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-platform-ai/src/components/DatePicker/DatePicker.config.ts index aba695d13e2..9ec67bf7a41 100644 --- a/packages/sdds-platform-ai/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-platform-ai/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,110 +51,110 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -121,12 +163,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -136,12 +178,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -165,30 +207,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -206,46 +248,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -256,25 +298,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -285,12 +327,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -300,12 +342,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -335,30 +377,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -376,46 +418,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -426,25 +468,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -455,12 +497,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -470,12 +512,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -505,30 +547,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -546,46 +588,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -596,25 +638,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -625,12 +667,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -640,12 +682,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -675,30 +717,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -716,46 +758,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -766,25 +808,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -795,12 +837,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -810,12 +852,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -845,30 +887,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -886,46 +928,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -936,25 +978,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -971,12 +1013,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -985,7 +1027,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -996,12 +1038,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1010,15 +1052,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1031,12 +1073,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1055,12 +1097,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1078,16 +1120,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-platform-ai/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/sdds-platform-ai/src/components/DateTimePicker/DateTimePicker.config.ts index 6ac3406a0e3..ff4dd4b2757 100644 --- a/packages/sdds-platform-ai/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/sdds-platform-ai/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,91 +52,91 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -113,30 +155,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -146,12 +188,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -168,46 +210,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.875rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.875rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.875rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -218,13 +260,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; @@ -237,21 +279,21 @@ export const config = { ${tokens.timePickerItemHeight}: 4rem; ${tokens.timePickerItemBorderRadius}: 0.875rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -272,30 +314,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -305,12 +347,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -327,46 +369,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +419,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; @@ -396,21 +438,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3.5rem; ${tokens.timePickerItemBorderRadius}: 0.75rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -431,30 +473,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +506,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -486,46 +528,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -536,13 +578,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; @@ -555,21 +597,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3rem; ${tokens.timePickerItemBorderRadius}: 0.625rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyM.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyM.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyM.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -590,30 +632,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -623,12 +665,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -645,46 +687,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -695,13 +737,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -714,21 +756,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -749,30 +791,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -782,12 +824,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -804,46 +846,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -854,13 +896,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -873,21 +915,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -962,12 +1004,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -976,7 +1018,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -987,12 +1029,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1001,7 +1043,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -1011,12 +1053,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-platform-ai/src/components/Divider/Divider.config.ts b/packages/sdds-platform-ai/src/components/Divider/Divider.config.ts index df0449d5c06..35ac7a37d8b 100644 --- a/packages/sdds-platform-ai/src/components/Divider/Divider.config.ts +++ b/packages/sdds-platform-ai/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/sdds-platform-ai/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-platform-ai/src/components/Dropdown/Dropdown.config.ts index 47b02593a13..7232d7b9f11 100644 --- a/packages/sdds-platform-ai/src/components/Dropdown/Dropdown.config.ts +++ b/packages/sdds-platform-ai/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,8 @@ +import { + bodyM, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -24,12 +29,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -37,18 +42,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-platform-ai/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..3a46785be48 100644 --- a/packages/sdds-platform-ai/src/components/Dropzone/Dropzone.config.ts +++ b/packages/sdds-platform-ai/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-platform-ai/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/sdds-platform-ai/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..208163572ad 100644 --- a/packages/sdds-platform-ai/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/sdds-platform-ai/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/EmptyState/EmptyState.config.ts b/packages/sdds-platform-ai/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..e4bafd4f587 100644 --- a/packages/sdds-platform-ai/src/components/EmptyState/EmptyState.config.ts +++ b/packages/sdds-platform-ai/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/File/File.config.ts b/packages/sdds-platform-ai/src/components/File/File.config.ts index 63d5a0ea5e9..c9ca8c049e1 100644 --- a/packages/sdds-platform-ai/src/components/File/File.config.ts +++ b/packages/sdds-platform-ai/src/components/File/File.config.ts @@ -1,3 +1,18 @@ +import { + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, fileTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +23,36 @@ export const config = { variations: { view: { default: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-secondary); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textSecondary}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-solid-default); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; `, negative: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-negative); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textNegative}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-negative); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceNegative}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-negative); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceNegative}; `, }, size: { @@ -52,19 +67,19 @@ export const config = { ${tokens.cellGap}: 0.625rem; ${tokens.cellPaddingRightContent}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -94,19 +109,19 @@ export const config = { ${tokens.cellGap}: 0.5rem; ${tokens.cellPaddingRightContent}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; diff --git a/packages/sdds-platform-ai/src/components/IconButton/IconButton.config.ts b/packages/sdds-platform-ai/src/components/IconButton/IconButton.config.ts index 0e9e36af2a7..60aae4efa20 100644 --- a/packages/sdds-platform-ai/src/components/IconButton/IconButton.config.ts +++ b/packages/sdds-platform-ai/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,41 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentGradient, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,86 +47,86 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent-gradient); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccentGradient}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; ${iconButtonTokens.iconButtonBackgroundColor}: transparent; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBorderColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBorderColorHover}: var(--text-primary); - ${iconButtonTokens.iconButtonBorderColorActive}: var(--text-primary); + ${iconButtonTokens.iconButtonBorderColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBorderColorHover}: ${textPrimary}; + ${iconButtonTokens.iconButtonBorderColorActive}: ${textPrimary}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); `, positive: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); `, negative: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--text-accent); + ${iconButtonTokens.iconButtonColor}: ${textAccent}; - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); `, }, @@ -99,12 +137,12 @@ export const config = { ${iconButtonTokens.iconButtonPadding}: 1.375rem; ${iconButtonTokens.iconButtonRadius}: 1.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -115,12 +153,12 @@ export const config = { ${iconButtonTokens.iconButtonPadding}: 1.5rem; ${iconButtonTokens.iconButtonRadius}: 0.875rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -131,12 +169,12 @@ export const config = { ${iconButtonTokens.iconButtonPadding}: 0.875rem; ${iconButtonTokens.iconButtonRadius}: 1.25rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -148,12 +186,12 @@ export const config = { ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 1.125rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -163,12 +201,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -181,7 +219,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/sdds-platform-ai/src/components/InformationWrapper/InformationWrapper.config.ts index fe9e5d9474c..c34c5a7c934 100644 --- a/packages/sdds-platform-ai/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/sdds-platform-ai/src/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,17 @@ +import { + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,50 +22,50 @@ export const config = { variations: { view: { default: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { m: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; @@ -63,29 +77,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -97,10 +111,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -113,12 +127,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -137,12 +151,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; diff --git a/packages/sdds-platform-ai/src/components/LinkButton/LinkButton.config.ts b/packages/sdds-platform-ai/src/components/LinkButton/LinkButton.config.ts index f4e3fedb3c8..6920c7d82af 100644 --- a/packages/sdds-platform-ai/src/components/LinkButton/LinkButton.config.ts +++ b/packages/sdds-platform-ai/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +38,70 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, // TODO: add info view }, @@ -80,12 +110,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 4rem; ${linkButtonTokens.linkButtonPadding}: 1.25rem 0; ${linkButtonTokens.linkButtonRadius}: 1rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.5rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -99,12 +129,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3.5rem; ${linkButtonTokens.linkButtonPadding}: 1rem 0; ${linkButtonTokens.linkButtonRadius}: 0.875rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -118,12 +148,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -137,12 +167,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -156,12 +186,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -175,12 +205,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 1.5rem; ${linkButtonTokens.linkButtonPadding}: 0.375rem 0; ${linkButtonTokens.linkButtonRadius}: 0.375rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 0.75rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/sdds-platform-ai/src/components/List/List.config.ts b/packages/sdds-platform-ai/src/components/List/List.config.ts index 060c6430ce4..fc4cb6dc49c 100644 --- a/packages/sdds-platform-ai/src/components/List/List.config.ts +++ b/packages/sdds-platform-ai/src/components/List/List.config.ts @@ -1,3 +1,9 @@ +import { + bodyM, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +14,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +35,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-platform-ai/src/components/Loader/Loader.config.ts b/packages/sdds-platform-ai/src/components/Loader/Loader.config.ts index 25fef650be1..57e8540b4b4 100644 --- a/packages/sdds-platform-ai/src/components/Loader/Loader.config.ts +++ b/packages/sdds-platform-ai/src/components/Loader/Loader.config.ts @@ -1,3 +1,30 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + overlaySoft, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, loaderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +35,67 @@ export const config = { variations: { view: { default: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-solid-default); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceSolidDefault}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-primary); + ${loaderTokens.spinnerColor}: ${textPrimary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, secondary: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceTransparentSecondary}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-secondary); + ${loaderTokens.spinnerColor}: ${textSecondary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, accent: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-accent); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceAccent}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-accent); + ${loaderTokens.spinnerColor}: ${textAccent}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, positive: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-positive); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfacePositive}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-positive); + ${loaderTokens.spinnerColor}: ${textPositive}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, warning: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-warning); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceWarning}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-warning); + ${loaderTokens.spinnerColor}: ${textWarning}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, negative: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-negative); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceNegative}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-negative); + ${loaderTokens.spinnerColor}: ${textNegative}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, info: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-info); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceInfo}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-info); + ${loaderTokens.spinnerColor}: ${textInfo}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, }, size: { @@ -81,12 +108,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 8rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h2.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h2.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h2.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h2Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h2.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h2.lineHeight}; ${loaderTokens.spinnerSize}: 8rem; `, @@ -99,12 +126,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 5.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h5.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h5.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h5.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h5Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h5.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h5.lineHeight}; ${loaderTokens.spinnerSize}: 5.5rem; `, @@ -117,12 +144,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyL.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyL.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyL.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyL.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyL.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyL.lineHeight}; ${loaderTokens.spinnerSize}: 3.5rem; `, @@ -135,12 +162,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyM.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyM.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyM.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyM.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyM.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyM.lineHeight}; ${loaderTokens.spinnerSize}: 3rem; `, @@ -153,12 +180,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 2.25rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyS.lineHeight}; ${loaderTokens.spinnerSize}: 2.25rem; `, @@ -171,12 +198,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXS.lineHeight}; ${loaderTokens.spinnerSize}: 1.5rem; `, @@ -189,12 +216,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXXS.lineHeight}; ${loaderTokens.spinnerSize}: 1rem; `, diff --git a/packages/sdds-platform-ai/src/components/Modal/Modal.config.ts b/packages/sdds-platform-ai/src/components/Modal/Modal.config.ts index 8b107b98ea3..0fbd1900b63 100644 --- a/packages/sdds-platform-ai/src/components/Modal/Modal.config.ts +++ b/packages/sdds-platform-ai/src/components/Modal/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,16 +16,16 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Note/Note.config.ts b/packages/sdds-platform-ai/src/components/Note/Note.config.ts index 6a5ccc486f5..d46694adf73 100644 --- a/packages/sdds-platform-ai/src/components/Note/Note.config.ts +++ b/packages/sdds-platform-ai/src/components/Note/Note.config.ts @@ -1,3 +1,19 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +24,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -44,8 +60,8 @@ export const config = { ${tokens.closeIconTop}: 0.75rem; ${tokens.closeIconRight}: 0.75rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -53,20 +69,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; ${tokens.titlePaddingRight}: 1.75rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Notification/Notification.config.ts b/packages/sdds-platform-ai/src/components/Notification/Notification.config.ts index a084d2c12ef..6bcd925331f 100644 --- a/packages/sdds-platform-ai/src/components/Notification/Notification.config.ts +++ b/packages/sdds-platform-ai/src/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +20,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +52,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +106,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +160,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +214,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +268,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/sdds-platform-ai/src/components/Pagination/Pagination.config.ts b/packages/sdds-platform-ai/src/components/Pagination/Pagination.config.ts index be8cae11b4f..60f3924463a 100644 --- a/packages/sdds-platform-ai/src/components/Pagination/Pagination.config.ts +++ b/packages/sdds-platform-ai/src/components/Pagination/Pagination.config.ts @@ -1,3 +1,18 @@ +import { + bodyM, + bodyMBold, + inverseTextPrimary, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,79 +24,79 @@ export const config = { variations: { view: { clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, }, size: { m: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; diff --git a/packages/sdds-platform-ai/src/components/Popover/Popover.config.ts b/packages/sdds-platform-ai/src/components/Popover/Popover.config.ts index 2f9acaf14e8..cb67ad6b0d9 100644 --- a/packages/sdds-platform-ai/src/components/Popover/Popover.config.ts +++ b/packages/sdds-platform-ai/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Progress/Progress.config.ts b/packages/sdds-platform-ai/src/components/Progress/Progress.config.ts index c4c58c51f85..9c30f5be83d 100644 --- a/packages/sdds-platform-ai/src/components/Progress/Progress.config.ts +++ b/packages/sdds-platform-ai/src/components/Progress/Progress.config.ts @@ -1,3 +1,14 @@ +import { + surfaceAccentGradient, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +19,39 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, info: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-info); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceInfo}; + ${progressTokens.valueColor}: ${textTertiary}; `, positive: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, negative: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/sdds-platform-ai/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/sdds-platform-ai/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index 6a6449f99a4..6439824a91d 100644 --- a/packages/sdds-platform-ai/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/sdds-platform-ai/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +70,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -63,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -76,12 +96,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -89,12 +109,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -102,12 +122,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -115,12 +135,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -128,12 +148,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Radiobox/Radiobox.config.ts b/packages/sdds-platform-ai/src/components/Radiobox/Radiobox.config.ts index f4b61c310f6..ec300dd3af6 100644 --- a/packages/sdds-platform-ai/src/components/Radiobox/Radiobox.config.ts +++ b/packages/sdds-platform-ai/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,11 @@ +import { + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + textAccent, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,18 +29,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,18 +52,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, /** @@ -63,11 +71,11 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -78,7 +86,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Rating/Rating.config.ts b/packages/sdds-platform-ai/src/components/Rating/Rating.config.ts index abe70fe7bbe..596f241f94c 100644 --- a/packages/sdds-platform-ai/src/components/Rating/Rating.config.ts +++ b/packages/sdds-platform-ai/src/components/Rating/Rating.config.ts @@ -1,3 +1,36 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + bodyXXS, + bodyXXSBold, + dataYellow, + dsplL, + dsplLBold, + dsplM, + dsplMBold, + dsplS, + dsplSBold, + h1, + h1Bold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + textPrimary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,35 +41,35 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-tertiary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textTertiary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-tertiary); - ${tokens.iconColor}: var(--data-yellow); - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textTertiary}; + ${tokens.iconColor}: ${dataYellow}; + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { l: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -47,19 +80,19 @@ export const config = { m: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -70,19 +103,19 @@ export const config = { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -93,19 +126,19 @@ export const config = { xs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.iconMarginBottom}: 0.125rem; ${tokens.contentGap}: 0.375rem; @@ -120,19 +153,19 @@ export const config = { xxs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.fontFamily}: ${bodyXXS.fontFamily}; + ${tokens.fontSize}: ${bodyXXS.fontSize}; + ${tokens.fontStyle}: ${bodyXXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.contentGap}: 0.375rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -145,19 +178,19 @@ export const config = { h1: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tokens.fontFamily}: ${h1.fontFamily}; + ${tokens.fontSize}: ${h1.fontSize}; + ${tokens.fontStyle}: ${h1.fontStyle}; + ${tokens.fontWeight}: ${h1Bold.fontWeight}; + ${tokens.letterSpacing}: ${h1.letterSpacing}; + ${tokens.lineHeight}: ${h1.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.helperTextFontFamily}: ${bodyM.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyM.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyM.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyM.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyM.lineHeight}; ${tokens.contentGap}: 1rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -176,19 +209,19 @@ export const config = { h2: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tokens.fontFamily}: ${h2.fontFamily}; + ${tokens.fontSize}: ${h2.fontSize}; + ${tokens.fontStyle}: ${h2.fontStyle}; + ${tokens.fontWeight}: ${h2Bold.fontWeight}; + ${tokens.letterSpacing}: ${h2.letterSpacing}; + ${tokens.lineHeight}: ${h2.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.875rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -207,19 +240,19 @@ export const config = { h3: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.fontFamily}: ${h3.fontFamily}; + ${tokens.fontSize}: ${h3.fontSize}; + ${tokens.fontStyle}: ${h3.fontStyle}; + ${tokens.fontWeight}: ${h3Bold.fontWeight}; + ${tokens.letterSpacing}: ${h3.letterSpacing}; + ${tokens.lineHeight}: ${h3.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.75rem; ${tokens.singleIconContentGap}: 0.375rem; @@ -238,19 +271,19 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.fontFamily}: ${h4.fontFamily}; + ${tokens.fontSize}: ${h4.fontSize}; + ${tokens.fontStyle}: ${h4.fontStyle}; + ${tokens.fontWeight}: ${h4Bold.fontWeight}; + ${tokens.letterSpacing}: ${h4.letterSpacing}; + ${tokens.lineHeight}: ${h4.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -269,19 +302,19 @@ export const config = { h5: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.fontFamily}: ${h5.fontFamily}; + ${tokens.fontSize}: ${h5.fontSize}; + ${tokens.fontStyle}: ${h5.fontStyle}; + ${tokens.fontWeight}: ${h5Bold.fontWeight}; + ${tokens.letterSpacing}: ${h5.letterSpacing}; + ${tokens.lineHeight}: ${h5.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -300,19 +333,19 @@ export const config = { h6: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tokens.fontFamily}: ${h6.fontFamily}; + ${tokens.fontSize}: ${h6.fontSize}; + ${tokens.fontStyle}: ${h6.fontStyle}; + ${tokens.fontWeight}: ${h6Bold.fontWeight}; + ${tokens.letterSpacing}: ${h6.letterSpacing}; + ${tokens.lineHeight}: ${h6.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -331,19 +364,19 @@ export const config = { displayL: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${tokens.fontFamily}: ${dsplL.fontFamily}; + ${tokens.fontSize}: ${dsplL.fontSize}; + ${tokens.fontStyle}: ${dsplL.fontStyle}; + ${tokens.fontWeight}: ${dsplLBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplL.letterSpacing}; + ${tokens.lineHeight}: ${dsplL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.helperTextFontFamily}: ${h3.fontFamily}; + ${tokens.helperTextFontSize}: ${h3.fontSize}; + ${tokens.helperTextFontStyle}: ${h3.fontStyle}; + ${tokens.helperTextFontWeight}: ${h3.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing}; + ${tokens.helperTextLineHeight}: ${h3.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -362,19 +395,19 @@ export const config = { displayM: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${tokens.fontFamily}: ${dsplM.fontFamily}; + ${tokens.fontSize}: ${dsplM.fontSize}; + ${tokens.fontStyle}: ${dsplM.fontStyle}; + ${tokens.fontWeight}: ${dsplMBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplM.letterSpacing}; + ${tokens.lineHeight}: ${dsplM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -393,19 +426,19 @@ export const config = { displayS: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${dsplS.fontFamily}; + ${tokens.fontSize}: ${dsplS.fontSize}; + ${tokens.fontStyle}: ${dsplS.fontStyle}; + ${tokens.fontWeight}: ${dsplSBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplS.letterSpacing}; + ${tokens.lineHeight}: ${dsplS.lineHeight}; + + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; diff --git a/packages/sdds-platform-ai/src/components/Scrollbar/Scrollbar.config.ts b/packages/sdds-platform-ai/src/components/Scrollbar/Scrollbar.config.ts index 0220aa026dc..62fbe99168a 100644 --- a/packages/sdds-platform-ai/src/components/Scrollbar/Scrollbar.config.ts +++ b/packages/sdds-platform-ai/src/components/Scrollbar/Scrollbar.config.ts @@ -1,8 +1,10 @@ +import { surfaceTransparentPrimary, surfaceTransparentTertiary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; + export const config = { view: { default: { - trackColor: 'var(--surface-transparent-primary)', - thumbColor: 'var(--surface-transparent-tertiary)', + trackColor: surfaceTransparentPrimary, + thumbColor: surfaceTransparentTertiary, }, }, size: { diff --git a/packages/sdds-platform-ai/src/components/Segment/SegmentGroup.config.ts b/packages/sdds-platform-ai/src/components/Segment/SegmentGroup.config.ts index d0cdc2a0d4c..30a31a828cc 100644 --- a/packages/sdds-platform-ai/src/components/Segment/SegmentGroup.config.ts +++ b/packages/sdds-platform-ai/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +9,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -49,7 +50,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary}; `, }, orientation: { diff --git a/packages/sdds-platform-ai/src/components/Segment/SegmentItem.config.ts b/packages/sdds-platform-ai/src/components/Segment/SegmentItem.config.ts index c22960305cf..f4f5f1753e4 100644 --- a/packages/sdds-platform-ai/src/components/Segment/SegmentItem.config.ts +++ b/packages/sdds-platform-ai/src/components/Segment/SegmentItem.config.ts @@ -1,3 +1,23 @@ +import { + bodyM, + bodyMBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,68 +28,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -83,12 +103,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -100,12 +120,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-platform-ai/src/components/Select/Select.config.ts b/packages/sdds-platform-ai/src/components/Select/Select.config.ts index a088f14a691..c934ad4bc90 100644 --- a/packages/sdds-platform-ai/src/components/Select/Select.config.ts +++ b/packages/sdds-platform-ai/src/components/Select/Select.config.ts @@ -1,3 +1,74 @@ +import { + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + onLightTextSecondaryActive, + onLightTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,348 +81,348 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, accent: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-accent); - ${tokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-accent-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceAccent}; + ${tokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, secondary: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, clear: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-active); - ${tokens.buttonBackgroundColor}: var(--surface-clear); - ${tokens.buttonBackgroundColorHover}: var(--surface-clear); - ${tokens.buttonBackgroundColorActive}: var(--surface-clear); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryActive}; + ${tokens.buttonBackgroundColor}: ${surfaceClear}; + ${tokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${tokens.buttonBackgroundColorActive}: ${surfaceClear}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, dark: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-transparent-deep); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceTransparentDeep}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceTransparentDeepHover}; + ${tokens.buttonBackgroundColorActive}:${onLightSurfaceTransparentDeepActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, black: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, white: css` - ${tokens.buttonColor}: var(--on-light-text-primary); - ${tokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-light-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-light-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-light-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-light-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-dark-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); - - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); + ${tokens.buttonColor}: ${onLightTextPrimary}; + ${tokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onLightTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onLightTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onLightTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onLightTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onDarkSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onDarkSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}:${onDarkSurfaceSolidDefaultActive}; + + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -371,20 +442,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -392,12 +463,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -420,12 +491,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -451,19 +522,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -483,69 +554,69 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--on-dark-text-primary); - ${tokens.textFieldChipColorHover}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${onDarkTextPrimary}; + ${tokens.textFieldChipColorHover}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -558,12 +629,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -582,12 +653,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -607,12 +678,12 @@ export const config = { true: css` ${tokens.disclosureIconOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Slider/Slider.config.ts b/packages/sdds-platform-ai/src/components/Slider/Slider.config.ts index c171f134490..85a649751fa 100644 --- a/packages/sdds-platform-ai/src/components/Slider/Slider.config.ts +++ b/packages/sdds-platform-ai/src/components/Slider/Slider.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + surfaceAccent, + surfaceAccentGradient, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +25,70 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, gradient: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent-gradient); + ${sliderTokens.fillColor}: ${surfaceAccentGradient}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, }, size: { @@ -85,24 +102,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -119,12 +136,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -136,24 +153,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -170,12 +187,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -187,24 +204,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -221,12 +238,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-platform-ai/src/components/Steps/Steps.config.ts b/packages/sdds-platform-ai/src/components/Steps/Steps.config.ts index c4a93c94b08..21eb35c1999 100644 --- a/packages/sdds-platform-ai/src/components/Steps/Steps.config.ts +++ b/packages/sdds-platform-ai/src/components/Steps/Steps.config.ts @@ -1,42 +1,71 @@ +import { + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -47,10 +76,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -60,26 +89,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -100,33 +129,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -137,8 +166,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/sdds-platform-ai/src/components/Switch/Switch.config.ts b/packages/sdds-platform-ai/src/components/Switch/Switch.config.ts index 7a43e44bd26..8f1319886c8 100644 --- a/packages/sdds-platform-ai/src/components/Switch/Switch.config.ts +++ b/packages/sdds-platform-ai/src/components/Switch/Switch.config.ts @@ -1,3 +1,15 @@ +import { + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,34 +23,34 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -67,17 +79,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -88,7 +100,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 02802a53874..4ad0cc18b76 100644 --- a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,40 +15,40 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index 26c0984c7ce..a994b465385 100644 --- a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,19 @@ +import { + bodyM, + bodyMBold, + h1, + h2, + h3, + h4, + h5, + h6, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,52 +24,52 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -69,12 +85,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -86,12 +102,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tabsTokens.fontFamily}: ${h6.fontFamily}; + ${tabsTokens.fontSize}: ${h6.fontSize}; + ${tabsTokens.fontStyle}: ${h6.fontStyle}; + ${tabsTokens.fontWeight}: ${h6.fontWeight}; + ${tabsTokens.letterSpacing}: ${h6.letterSpacing}; + ${tabsTokens.lineHeight}: ${h6.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -103,12 +119,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -120,12 +136,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -137,12 +153,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -154,12 +170,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -171,12 +187,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabs.config.ts index bc3e5edf5c1..49d2b40c504 100644 --- a/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-platform-ai/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +16,36 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-platform-ai/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/sdds-platform-ai/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index 657ff23a90a..9e6b29a2391 100644 --- a/packages/sdds-platform-ai/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/sdds-platform-ai/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/sdds-platform-ai/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-platform-ai/src/components/Tabs/vertical/VerticalTabItem.config.ts index 9d383475236..54f7abe8380 100644 --- a/packages/sdds-platform-ai/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-platform-ai/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,13 @@ +import { + bodyM, + bodyMBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +18,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +59,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/sdds-platform-ai/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/sdds-platform-ai/src/components/Tabs/vertical/VerticalTabs.config.ts index 78eba3f047c..ac882311091 100644 --- a/packages/sdds-platform-ai/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/sdds-platform-ai/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-platform-ai/src/components/TextArea/TextArea.config.ts b/packages/sdds-platform-ai/src/components/TextArea/TextArea.config.ts index 9cb0e589462..0718dfbc2e0 100644 --- a/packages/sdds-platform-ai/src/components/TextArea/TextArea.config.ts +++ b/packages/sdds-platform-ai/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,28 @@ +import { + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,88 +33,88 @@ export const config = { variations: { view: { default: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-primary); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-primary); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-negative); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-negative); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -118,30 +143,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -161,20 +186,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -187,12 +212,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -212,12 +237,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -235,18 +260,18 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/TextField/TextField.config.ts b/packages/sdds-platform-ai/src/components/TextField/TextField.config.ts index e333ab68d5f..3f9b5feae5f 100644 --- a/packages/sdds-platform-ai/src/components/TextField/TextField.config.ts +++ b/packages/sdds-platform-ai/src/components/TextField/TextField.config.ts @@ -1,3 +1,55 @@ +import { + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,133 +62,133 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.clearColor}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - ${tokens.clearPlaceholderColor}: var(--text-secondary); - ${tokens.clearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.caretColor}: var(--text-primary); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + ${tokens.clearColor}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + ${tokens.clearPlaceholderColor}: ${textSecondary}; + ${tokens.clearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.caretColor}: ${textPrimary}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-primary); - ${tokens.clearColor}: var(--text-positive); - - ${tokens.placeholderColor}: var(--text-secondary); - - ${tokens.placeholderColorFocus}: var(--text-tertiary); - ${tokens.clearPlaceholderColor}: var(--text-positive); - ${tokens.clearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.backgroundColor}: var(--surface-transparent-positive); - ${tokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + ${tokens.clearColor}: ${textPositive}; + + ${tokens.placeholderColor}: ${textSecondary}; + + ${tokens.placeholderColorFocus}: ${textTertiary}; + ${tokens.clearPlaceholderColor}: ${textPositive}; + ${tokens.clearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.backgroundColor}: ${surfaceTransparentPositive}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-primary); - ${tokens.clearColor}: var(--text-warning); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - ${tokens.clearPlaceholderColor}: var(--text-warning); - ${tokens.clearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.backgroundColor}: var(--surface-transparent-warning); - ${tokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + ${tokens.clearColor}: ${textWarning}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + ${tokens.clearPlaceholderColor}: ${textWarning}; + ${tokens.clearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.backgroundColor}: ${surfaceTransparentWarning}; + ${tokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); - ${tokens.clearColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - ${tokens.clearPlaceholderColor}: var(--text-negative); - ${tokens.clearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + ${tokens.clearColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + ${tokens.clearPlaceholderColor}: ${textNegative}; + ${tokens.clearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -154,23 +206,23 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelPadding}: 0 0 0 1rem; ${tokens.labelOffset}: 0.25rem; ${tokens.clearLabelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -178,20 +230,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -205,12 +257,12 @@ export const config = { ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -228,13 +280,13 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, @@ -243,114 +295,114 @@ export const config = { }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -363,12 +415,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -387,12 +439,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -411,13 +463,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-platform-ai/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/sdds-platform-ai/src/components/TextFieldGroup/TextFieldGroup.config.ts index 58861e085c6..342d7c3cc4c 100644 --- a/packages/sdds-platform-ai/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/sdds-platform-ai/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyM, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-platform-ai/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-platform-ai/src/components/TimePicker/TimePicker.config.ts index b86cc9da0bd..8ed86dc3fce 100644 --- a/packages/sdds-platform-ai/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-platform-ai/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,45 +33,45 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; - ${tokens.labelColor}: var(--text-primary); + ${tokens.labelColor}: ${textPrimary}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); + ${tokens.timePickerShadow}: ${shadowDownSoftS}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -63,12 +86,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -80,12 +103,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -103,34 +126,34 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.5rem; @@ -146,12 +169,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -163,12 +186,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -186,34 +209,34 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -229,12 +252,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -246,12 +269,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -269,34 +292,34 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.813rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -312,12 +335,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -329,12 +352,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -352,34 +375,34 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -450,13 +473,13 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Toast/Toast.config.ts b/packages/sdds-platform-ai/src/components/Toast/Toast.config.ts index cd450f58b07..7adcca1f023 100644 --- a/packages/sdds-platform-ai/src/components/Toast/Toast.config.ts +++ b/packages/sdds-platform-ai/src/components/Toast/Toast.config.ts @@ -1,3 +1,11 @@ +import { + bodyXS, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,27 +17,27 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-positive); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textPositive}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-negative); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textNegative}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, }, size: { @@ -37,12 +45,12 @@ export const config = { ${toastTokens.borderRadius}: 0.75rem; ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/sdds-platform-ai/src/components/Toolbar/Toolbar.config.ts b/packages/sdds-platform-ai/src/components/Toolbar/Toolbar.config.ts index a4de716d495..136aaa9f758 100644 --- a/packages/sdds-platform-ai/src/components/Toolbar/Toolbar.config.ts +++ b/packages/sdds-platform-ai/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/sdds-platform-ai/src/components/Tooltip/Tooltip.config.ts b/packages/sdds-platform-ai/src/components/Tooltip/Tooltip.config.ts index 2ca59cef4c5..2f015e3ebfc 100644 --- a/packages/sdds-platform-ai/src/components/Tooltip/Tooltip.config.ts +++ b/packages/sdds-platform-ai/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,4 @@ +import { bodyS, bodyXS, surfaceSolidCardBrightness, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +17,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -30,7 +31,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -41,12 +42,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -55,15 +56,15 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.color}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Typography/Body.config.ts b/packages/sdds-platform-ai/src/components/Typography/Body.config.ts index 23927fdf18c..78676c975f8 100644 --- a/packages/sdds-platform-ai/src/components/Typography/Body.config.ts +++ b/packages/sdds-platform-ai/src/components/Typography/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Typography/Dspl.config.ts b/packages/sdds-platform-ai/src/components/Typography/Dspl.config.ts index 3fb1245a027..b996b093f32 100644 --- a/packages/sdds-platform-ai/src/components/Typography/Dspl.config.ts +++ b/packages/sdds-platform-ai/src/components/Typography/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +18,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +38,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +58,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Typography/Heading.config.ts b/packages/sdds-platform-ai/src/components/Typography/Heading.config.ts index 77f16729129..b037806c29e 100644 --- a/packages/sdds-platform-ai/src/components/Typography/Heading.config.ts +++ b/packages/sdds-platform-ai/src/components/Typography/Heading.config.ts @@ -1,3 +1,23 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, + h6, + h6Bold, + h6Medium, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configH1 = { @@ -7,14 +27,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +46,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +65,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +84,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +103,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, @@ -102,14 +122,14 @@ export const configH6 = { variations: { size: { h6: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + ${typographyTokens.typoFontFamily}: ${h6.fontFamily}; + ${typographyTokens.typoFontSize}: ${h6.fontSize}; + ${typographyTokens.typoFontStyle}: ${h6.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h6.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h6Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h6Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h6.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h6.lineHeight}; `, }, }, diff --git a/packages/sdds-platform-ai/src/components/Typography/Text.config.ts b/packages/sdds-platform-ai/src/components/Typography/Text.config.ts index 542bc09a87d..e8774ccd62d 100644 --- a/packages/sdds-platform-ai/src/components/Typography/Text.config.ts +++ b/packages/sdds-platform-ai/src/components/Typography/Text.config.ts @@ -1,3 +1,17 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_platform_ai'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +21,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +41,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +61,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +81,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, From c6bb667711aca1a1c26a06313fc4dfa849344eec Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 20:31:59 +0300 Subject: [PATCH 19/24] chore(sdds-scan): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 137 +-- .../src/components/Attach/Attach.config.ts | 152 +-- .../Autocomplete/Autocomplete.config.ts | 456 +++++---- .../src/components/Badge/Badge.config.ts | 148 +-- .../Breadcrumbs/Breadcrumbs.config.ts | 33 +- .../src/components/Button/Button.config.ts | 220 ++-- .../ButtonGroup/ButtonGroup.config.ts | 262 +++-- .../components/Calendar/Calendar.config.ts | 243 +++-- .../Calendar/CalendarDouble.config.ts | 243 +++-- .../src/components/Card/Card.config.ts | 3 +- .../components/Carousel/Carousel.config.ts | 24 +- .../src/components/Cell/Cell.config.ts | 169 ++-- .../components/Checkbox/Checkbox.config.ts | 78 +- .../components/ChipGroup/ChipGroup.config.ts | 89 +- .../components/Combobox/Combobox.config.ts | 604 +++++------ .../src/components/Counter/Counter.config.ts | 103 +- .../DatePicker/DatePicker.config.ts | 589 ++++++----- .../DateTimePicker/DateTimePicker.config.ts | 954 +++++++++--------- .../src/components/Divider/Divider.config.ts | 14 +- .../src/components/Drawer/Drawer.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 58 +- .../components/Dropzone/Dropzone.config.ts | 53 +- .../EmbedIconButton/EmbedIconButton.config.ts | 125 ++- .../EmptyState/EmptyState.config.ts | 49 +- .../src/components/File/File.config.ts | 109 +- .../IconButton/IconButton.config.ts | 156 +-- .../InformationWrapper.config.ts | 295 +++--- .../LinkButton/LinkButton.config.ts | 172 ++-- .../src/components/List/List.config.ts | 52 +- .../src/components/Loader/Loader.config.ts | 181 ++-- .../src/components/Modal/Modal.config.ts | 20 +- .../src/components/Note/Note.config.ts | 104 +- .../Notification/Notification.config.ts | 196 ++-- .../NumberInput/NumberInput.config.ts | 237 +++-- .../Pagination/Pagination.config.ts | 192 ++-- .../src/components/Popover/Popover.config.ts | 5 +- .../components/Progress/Progress.config.ts | 53 +- .../ProgressBarCircular.config.ts | 146 +-- .../components/Radiobox/Radiobox.config.ts | 66 +- .../src/components/Range/Range.config.ts | 286 +++--- .../src/components/Rating/Rating.config.ts | 72 +- .../components/Segment/SegmentGroup.config.ts | 11 +- .../components/Segment/SegmentItem.config.ts | 128 ++- .../src/components/Select/Select.config.ts | 937 +++++++++-------- .../Skeleton/LineSkeleton.config.ts | 108 +- .../src/components/Slider/Slider.config.ts | 209 ++-- .../src/components/Steps/Steps.config.ts | 332 +++--- .../src/components/Switch/Switch.config.ts | 103 +- .../src/components/Table/Table.config.ts | 180 ++-- .../HorizontalIconTabItem.config.ts | 70 +- .../horizontal/HorizontalTabItem.config.ts | 231 +++-- .../Tabs/horizontal/HorizontalTabs.config.ts | 36 +- .../vertical/VerticalIconTabItem.config.ts | 23 +- .../Tabs/vertical/VerticalTabItem.config.ts | 76 +- .../Tabs/vertical/VerticalTabs.config.ts | 17 +- .../components/TextArea/TextArea.config.ts | 496 ++++----- .../components/TextField/TextField.config.ts | 616 +++++------ .../TextFieldGroup/TextFieldGroup.config.ts | 97 +- .../TimePicker/TimePicker.config.ts | 331 +++--- .../src/components/Toast/Toast.config.ts | 70 +- .../src/components/Toolbar/Toolbar.config.ts | 11 +- .../src/components/Tooltip/Tooltip.config.ts | 33 +- .../src/components/Tree/Tree.config.ts | 106 +- .../src/components/Typography/Body.config.ts | 97 +- .../src/components/Typography/Dspl.config.ts | 59 +- .../components/Typography/Heading.config.ts | 116 ++- .../src/components/Typography/Text.config.ts | 78 +- 67 files changed, 6479 insertions(+), 5254 deletions(-) diff --git a/packages/sdds-scan/src/components/Accordion/Accordion.config.ts b/packages/sdds-scan/src/components/Accordion/Accordion.config.ts index 9fc71656930..0ddead51cec 100644 --- a/packages/sdds-scan/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-scan/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,18 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,12 +26,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, @@ -24,14 +39,14 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -42,19 +57,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.875rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyLBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -63,19 +78,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -84,19 +99,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -105,19 +120,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXSBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight}; - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-scan/src/components/Attach/Attach.config.ts b/packages/sdds-scan/src/components/Attach/Attach.config.ts index 7f05db29974..71199db50e7 100644 --- a/packages/sdds-scan/src/components/Attach/Attach.config.ts +++ b/packages/sdds-scan/src/components/Attach/Attach.config.ts @@ -1,3 +1,21 @@ +import { + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + surfaceAccent, + surfaceClear, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,55 +28,55 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -73,12 +91,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -97,37 +115,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -136,12 +154,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/sdds-scan/src/components/Autocomplete/Autocomplete.config.ts b/packages/sdds-scan/src/components/Autocomplete/Autocomplete.config.ts index 48a583522a0..be0bd90e208 100644 --- a/packages/sdds-scan/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/sdds-scan/src/components/Autocomplete/Autocomplete.config.ts @@ -1,3 +1,33 @@ +import { + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,172 +39,172 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-positive); - ${tokens.textFieldDividerColorHover}: var(--surface-positive); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfacePositive}; + ${tokens.textFieldDividerColorHover}: ${surfacePositive}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-warning); - ${tokens.textFieldDividerColorHover}: var(--surface-warning); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceWarning}; + ${tokens.textFieldDividerColorHover}: ${surfaceWarning}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--surface-negative); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${surfaceNegative}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, }, size: { @@ -193,21 +223,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -215,12 +245,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -240,12 +270,12 @@ export const config = { ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; ${tokens.emptyStateGap}: 0.375rem; @@ -268,21 +298,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -290,12 +320,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -315,12 +345,12 @@ export const config = { ${tokens.itemPadding}: 0.6875rem 0.75rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -331,22 +361,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -359,12 +389,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -383,12 +413,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -406,14 +436,14 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary}; `, }, }, diff --git a/packages/sdds-scan/src/components/Badge/Badge.config.ts b/packages/sdds-scan/src/components/Badge/Badge.config.ts index 3d8e8df196e..f78d2c129d0 100644 --- a/packages/sdds-scan/src/components/Badge/Badge.config.ts +++ b/packages/sdds-scan/src/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +36,67 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -78,12 +106,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -97,12 +125,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -116,12 +144,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -135,12 +163,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -159,7 +187,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/sdds-scan/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/sdds-scan/src/components/Breadcrumbs/Breadcrumbs.config.ts index 70a0b16e493..9c943cce6b1 100644 --- a/packages/sdds-scan/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/sdds-scan/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,4 @@ +import { bodyM, bodyMBold, bodyS, bodySBold, surfaceAccent, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,33 +9,33 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, }, }, diff --git a/packages/sdds-scan/src/components/Button/Button.config.ts b/packages/sdds-scan/src/components/Button/Button.config.ts index 887e91b7dec..24551dac741 100644 --- a/packages/sdds-scan/src/components/Button/Button.config.ts +++ b/packages/sdds-scan/src/components/Button/Button.config.ts @@ -1,3 +1,45 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,104 +51,104 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, positive: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, negative: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -115,12 +157,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -136,12 +178,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -157,12 +199,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -181,7 +223,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/sdds-scan/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/sdds-scan/src/components/ButtonGroup/ButtonGroup.config.ts index 736b0450b45..c0a532ef222 100644 --- a/packages/sdds-scan/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/sdds-scan/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,49 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,124 +54,124 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, positive: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, negative: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; `, }, size: { @@ -137,12 +183,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -151,12 +197,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -165,12 +211,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-scan/src/components/Calendar/Calendar.config.ts b/packages/sdds-scan/src/components/Calendar/Calendar.config.ts index 9338d99fbd9..c7b6f6ef29c 100644 --- a/packages/sdds-scan/src/components/Calendar/Calendar.config.ts +++ b/packages/sdds-scan/src/components/Calendar/Calendar.config.ts @@ -1,3 +1,22 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + h4, + h4Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,38 +28,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -51,46 +70,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +119,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -120,46 +139,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -169,13 +188,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -193,12 +212,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -207,7 +226,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -218,12 +237,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -232,7 +251,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-scan/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-scan/src/components/Calendar/CalendarDouble.config.ts index b8b28e9ac91..4d1b61b81b2 100644 --- a/packages/sdds-scan/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-scan/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,22 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + h4, + h4Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -52,46 +71,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +120,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -121,46 +140,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -170,13 +189,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -194,12 +213,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -208,7 +227,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -219,12 +238,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -233,7 +252,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-scan/src/components/Card/Card.config.ts b/packages/sdds-scan/src/components/Card/Card.config.ts index 2899613fb13..572a22adab9 100644 --- a/packages/sdds-scan/src/components/Card/Card.config.ts +++ b/packages/sdds-scan/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,7 +9,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/sdds-scan/src/components/Carousel/Carousel.config.ts b/packages/sdds-scan/src/components/Carousel/Carousel.config.ts index f3fd82e4491..04c06f8bfcd 100644 --- a/packages/sdds-scan/src/components/Carousel/Carousel.config.ts +++ b/packages/sdds-scan/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +16,14 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary); - ${tokens.paginationDotActiveBackground}: var(--surface-solid-default); - ${tokens.controlIconButtonColor}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.controlIconButtonColorHover}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.controlIconButtonColorActive}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary}; + ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault}; + ${tokens.controlIconButtonColor}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.controlIconButtonColorHover}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.controlIconButtonColorActive}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, }, size: { diff --git a/packages/sdds-scan/src/components/Cell/Cell.config.ts b/packages/sdds-scan/src/components/Cell/Cell.config.ts index 6588088c11f..7bf0579a0f0 100644 --- a/packages/sdds-scan/src/components/Cell/Cell.config.ts +++ b/packages/sdds-scan/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -87,26 +88,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -119,26 +120,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-scan/src/components/Checkbox/Checkbox.config.ts b/packages/sdds-scan/src/components/Checkbox/Checkbox.config.ts index 82b5f1765ff..3d62c99dcb5 100644 --- a/packages/sdds-scan/src/components/Checkbox/Checkbox.config.ts +++ b/packages/sdds-scan/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,13 @@ +import { + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + textAccent, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,18 +27,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -39,36 +49,36 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, negative: css` - ${checkboxTokens.fillColor}: var(--text-negative); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textNegative}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-negative); + ${checkboxTokens.triggerBorderColor}: ${textNegative}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -79,7 +89,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-scan/src/components/ChipGroup/ChipGroup.config.ts b/packages/sdds-scan/src/components/ChipGroup/ChipGroup.config.ts index 75a8e141bda..056c93e823e 100644 --- a/packages/sdds-scan/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/sdds-scan/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +25,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +56,12 @@ export const config = { ${tokens.chipHeight}: 3rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.5rem; @@ -60,12 +77,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -81,12 +98,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/sdds-scan/src/components/Combobox/Combobox.config.ts b/packages/sdds-scan/src/components/Combobox/Combobox.config.ts index 5446b960655..07405378fc5 100644 --- a/packages/sdds-scan/src/components/Combobox/Combobox.config.ts +++ b/packages/sdds-scan/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,33 @@ +import { + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,221 +39,221 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -243,20 +273,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -264,12 +294,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -292,12 +322,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -319,19 +349,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -364,20 +394,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -385,12 +415,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -413,12 +443,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 0.625rem 0.875rem 0.625rem 0.875rem; ${tokens.padding}: 0.125rem; @@ -440,19 +470,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -472,22 +502,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -500,12 +530,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -524,12 +554,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -547,13 +577,13 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-scan/src/components/Counter/Counter.config.ts b/packages/sdds-scan/src/components/Counter/Counter.config.ts index 140aa43a57f..30166d79caf 100644 --- a/packages/sdds-scan/src/components/Counter/Counter.config.ts +++ b/packages/sdds-scan/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,32 +23,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -41,56 +56,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-scan/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-scan/src/components/DatePicker/DatePicker.config.ts index c3250a5c03e..1e284774346 100644 --- a/packages/sdds-scan/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-scan/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,38 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + h4, + h4Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,110 +44,110 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -121,12 +156,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -136,12 +171,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -171,30 +206,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -212,46 +247,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -262,25 +297,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -291,12 +326,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -306,12 +341,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -341,30 +376,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -382,46 +417,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -432,25 +467,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -467,12 +502,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -481,7 +516,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -492,12 +527,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -506,15 +541,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -527,12 +562,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -551,12 +586,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -574,16 +609,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-scan/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/sdds-scan/src/components/DateTimePicker/DateTimePicker.config.ts index 6ac3406a0e3..03953272bd6 100644 --- a/packages/sdds-scan/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/sdds-scan/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,91 +52,91 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -113,30 +155,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -146,12 +188,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -168,46 +210,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.875rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.875rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.875rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -218,13 +260,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; @@ -237,21 +279,21 @@ export const config = { ${tokens.timePickerItemHeight}: 4rem; ${tokens.timePickerItemBorderRadius}: 0.875rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -272,30 +314,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -305,12 +347,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -327,46 +369,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +419,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; @@ -396,21 +438,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3.5rem; ${tokens.timePickerItemBorderRadius}: 0.75rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -431,30 +473,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +506,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -486,46 +528,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -536,13 +578,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; @@ -555,21 +597,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3rem; ${tokens.timePickerItemBorderRadius}: 0.625rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyM.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyM.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyM.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -590,30 +632,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -623,12 +665,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -645,46 +687,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -695,13 +737,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -714,21 +756,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -749,30 +791,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -782,12 +824,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -804,46 +846,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -854,13 +896,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -873,21 +915,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -962,12 +1004,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -976,7 +1018,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -987,12 +1029,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1001,7 +1043,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -1011,12 +1053,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-scan/src/components/Divider/Divider.config.ts b/packages/sdds-scan/src/components/Divider/Divider.config.ts index df0449d5c06..5aa2b5c5699 100644 --- a/packages/sdds-scan/src/components/Divider/Divider.config.ts +++ b/packages/sdds-scan/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/sdds-scan/src/components/Drawer/Drawer.config.ts b/packages/sdds-scan/src/components/Drawer/Drawer.config.ts index b0b00b15040..6db3a236474 100644 --- a/packages/sdds-scan/src/components/Drawer/Drawer.config.ts +++ b/packages/sdds-scan/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/sdds-scan/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-scan/src/components/Dropdown/Dropdown.config.ts index 895f5062f14..599f51ba23a 100644 --- a/packages/sdds-scan/src/components/Dropdown/Dropdown.config.ts +++ b/packages/sdds-scan/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,9 @@ +import { + bodyM, + bodyS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -24,12 +30,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -37,12 +43,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 0.125rem; @@ -61,12 +67,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -74,18 +80,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/sdds-scan/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-scan/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..8ee4a51ee1f 100644 --- a/packages/sdds-scan/src/components/Dropzone/Dropzone.config.ts +++ b/packages/sdds-scan/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-scan/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/sdds-scan/src/components/EmbedIconButton/EmbedIconButton.config.ts index 20530f608ba..36e6d93de84 100644 --- a/packages/sdds-scan/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/sdds-scan/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-scan/src/components/EmptyState/EmptyState.config.ts b/packages/sdds-scan/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..765582fa915 100644 --- a/packages/sdds-scan/src/components/EmptyState/EmptyState.config.ts +++ b/packages/sdds-scan/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-scan/src/components/File/File.config.ts b/packages/sdds-scan/src/components/File/File.config.ts index 63d5a0ea5e9..2c32db05e25 100644 --- a/packages/sdds-scan/src/components/File/File.config.ts +++ b/packages/sdds-scan/src/components/File/File.config.ts @@ -1,3 +1,18 @@ +import { + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, fileTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +23,36 @@ export const config = { variations: { view: { default: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-secondary); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textSecondary}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-solid-default); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; `, negative: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-negative); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textNegative}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-negative); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceNegative}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-negative); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceNegative}; `, }, size: { @@ -52,19 +67,19 @@ export const config = { ${tokens.cellGap}: 0.625rem; ${tokens.cellPaddingRightContent}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -94,19 +109,19 @@ export const config = { ${tokens.cellGap}: 0.5rem; ${tokens.cellPaddingRightContent}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; diff --git a/packages/sdds-scan/src/components/IconButton/IconButton.config.ts b/packages/sdds-scan/src/components/IconButton/IconButton.config.ts index 5069e047ca6..31de8c67568 100644 --- a/packages/sdds-scan/src/components/IconButton/IconButton.config.ts +++ b/packages/sdds-scan/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,41 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,74 +47,74 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, positive: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, negative: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -85,12 +123,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -100,12 +138,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -115,12 +153,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -133,7 +171,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-scan/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/sdds-scan/src/components/InformationWrapper/InformationWrapper.config.ts index 45b90809f49..cef77f8d51d 100644 --- a/packages/sdds-scan/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/sdds-scan/src/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,18 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,50 +23,50 @@ export const config = { variations: { view: { default: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { l: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; @@ -63,29 +78,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -95,12 +110,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, m: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; @@ -112,29 +127,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -144,12 +159,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, s: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -161,29 +176,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -193,12 +208,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, xs: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; @@ -210,29 +225,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -244,10 +259,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -260,12 +275,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -284,12 +299,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; diff --git a/packages/sdds-scan/src/components/LinkButton/LinkButton.config.ts b/packages/sdds-scan/src/components/LinkButton/LinkButton.config.ts index 752050d0655..9e2a00740dd 100644 --- a/packages/sdds-scan/src/components/LinkButton/LinkButton.config.ts +++ b/packages/sdds-scan/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,31 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +36,70 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, info: css` - ${linkButtonTokens.linkButtonColor}: var(--text-info); - ${linkButtonTokens.linkButtonIconColor}: var(--text-info); - ${linkButtonTokens.linkButtonTextColor}: var(--text-info); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-info-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-info-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-info-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-info-active); + ${linkButtonTokens.linkButtonColor}: ${textInfo}; + ${linkButtonTokens.linkButtonIconColor}: ${textInfo}; + ${linkButtonTokens.linkButtonTextColor}: ${textInfo}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textInfoHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textInfoActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textInfoHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textInfoActive}; `, }, size: { @@ -79,12 +107,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -98,12 +126,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -117,12 +145,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/sdds-scan/src/components/List/List.config.ts b/packages/sdds-scan/src/components/List/List.config.ts index d69cd319d75..2a68e7b02a8 100644 --- a/packages/sdds-scan/src/components/List/List.config.ts +++ b/packages/sdds-scan/src/components/List/List.config.ts @@ -1,3 +1,11 @@ +import { + bodyL, + bodyM, + bodyS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +16,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +37,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -46,12 +54,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -63,12 +71,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-scan/src/components/Loader/Loader.config.ts b/packages/sdds-scan/src/components/Loader/Loader.config.ts index 25fef650be1..05f67ce7ef0 100644 --- a/packages/sdds-scan/src/components/Loader/Loader.config.ts +++ b/packages/sdds-scan/src/components/Loader/Loader.config.ts @@ -1,3 +1,30 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + overlaySoft, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, loaderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +35,67 @@ export const config = { variations: { view: { default: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-solid-default); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceSolidDefault}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-primary); + ${loaderTokens.spinnerColor}: ${textPrimary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, secondary: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceTransparentSecondary}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-secondary); + ${loaderTokens.spinnerColor}: ${textSecondary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, accent: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-accent); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceAccent}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-accent); + ${loaderTokens.spinnerColor}: ${textAccent}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, positive: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-positive); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfacePositive}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-positive); + ${loaderTokens.spinnerColor}: ${textPositive}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, warning: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-warning); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceWarning}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-warning); + ${loaderTokens.spinnerColor}: ${textWarning}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, negative: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-negative); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceNegative}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-negative); + ${loaderTokens.spinnerColor}: ${textNegative}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, info: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-info); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceInfo}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-info); + ${loaderTokens.spinnerColor}: ${textInfo}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, }, size: { @@ -81,12 +108,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 8rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h2.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h2.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h2.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h2Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h2.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h2.lineHeight}; ${loaderTokens.spinnerSize}: 8rem; `, @@ -99,12 +126,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 5.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h5.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h5.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h5.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h5Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h5.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h5.lineHeight}; ${loaderTokens.spinnerSize}: 5.5rem; `, @@ -117,12 +144,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyL.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyL.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyL.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyL.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyL.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyL.lineHeight}; ${loaderTokens.spinnerSize}: 3.5rem; `, @@ -135,12 +162,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyM.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyM.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyM.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyM.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyM.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyM.lineHeight}; ${loaderTokens.spinnerSize}: 3rem; `, @@ -153,12 +180,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 2.25rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyS.lineHeight}; ${loaderTokens.spinnerSize}: 2.25rem; `, @@ -171,12 +198,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXS.lineHeight}; ${loaderTokens.spinnerSize}: 1.5rem; `, @@ -189,12 +216,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXXS.lineHeight}; ${loaderTokens.spinnerSize}: 1rem; `, diff --git a/packages/sdds-scan/src/components/Modal/Modal.config.ts b/packages/sdds-scan/src/components/Modal/Modal.config.ts index 8b107b98ea3..2299229bf14 100644 --- a/packages/sdds-scan/src/components/Modal/Modal.config.ts +++ b/packages/sdds-scan/src/components/Modal/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,16 +16,16 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-scan/src/components/Note/Note.config.ts b/packages/sdds-scan/src/components/Note/Note.config.ts index 5e83606af7e..b5bc2a9747e 100644 --- a/packages/sdds-scan/src/components/Note/Note.config.ts +++ b/packages/sdds-scan/src/components/Note/Note.config.ts @@ -1,3 +1,21 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +26,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -44,8 +62,8 @@ export const config = { ${tokens.closeIconTop}: 0.75rem; ${tokens.closeIconRight}: 0.75rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -53,19 +71,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -77,8 +95,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -86,19 +104,19 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.titleFontFamily}: ${textS.fontFamily}; + ${tokens.titleFontSize}: ${textS.fontSize}; + ${tokens.titleFontStyle}: ${textS.fontStyle}; + ${tokens.titleFontWeight}: ${textSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; + ${tokens.titleLineHeight}: ${textS.lineHeight}; - ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.textFontFamily}: ${textS.fontFamily}; + ${tokens.textFontSize}: ${textS.fontSize}; + ${tokens.textFontStyle}: ${textS.fontStyle}; + ${tokens.textFontWeight}: ${textS.fontWeight}; + ${tokens.textLetterSpacing}: ${textS.letterSpacing}; + ${tokens.textLineHeight}: ${textS.lineHeight}; `, }, }, diff --git a/packages/sdds-scan/src/components/Notification/Notification.config.ts b/packages/sdds-scan/src/components/Notification/Notification.config.ts index e8527c03cc9..e6fa5d73a40 100644 --- a/packages/sdds-scan/src/components/Notification/Notification.config.ts +++ b/packages/sdds-scan/src/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +20,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +52,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +106,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +160,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +214,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +268,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/sdds-scan/src/components/NumberInput/NumberInput.config.ts b/packages/sdds-scan/src/components/NumberInput/NumberInput.config.ts index 90ca0aa8362..6e8c9cf581b 100644 --- a/packages/sdds-scan/src/components/NumberInput/NumberInput.config.ts +++ b/packages/sdds-scan/src/components/NumberInput/NumberInput.config.ts @@ -1,3 +1,36 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + inverseSurfaceTransparentSecondary, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextTertiary, + onDarkSurfaceTransparentSecondary, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextTertiary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,26 +43,26 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-solid-default); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${inverseSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceSolidDefault}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -37,26 +70,26 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, secondary: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.iconButtonColorSolidActive}: var(--text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -64,27 +97,27 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, accent: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--inverse-text-primary); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--on-dark-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--on-dark-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-accent); - - ${tokens.iconButtonColor}: var(--on-dark-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-accent); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${inverseTextPrimary}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${onDarkTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${onDarkTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${onDarkSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceAccent}; + + ${tokens.iconButtonColor}: ${onDarkTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${onDarkTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${onDarkTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -92,25 +125,25 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, clear: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; ${tokens.backgroundColorSolid}: transparent; - ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonColor}: ${textPrimary}; ${tokens.iconButtonBackgroundColor}: transparent; - ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; ${tokens.iconButtonBackgroundColorHover}: transparent; - ${tokens.iconButtonColorActive}: var(--text-primary-active); + ${tokens.iconButtonColorActive}: ${textPrimaryActive}; ${tokens.iconButtonBackgroundColorActive}: transparent; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -125,12 +158,12 @@ export const config = { ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -140,12 +173,12 @@ export const config = { ${tokens.textWrapperHeight}: 3rem; ${tokens.textWrapperPadding}: 0.875rem 1rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -157,12 +190,12 @@ export const config = { ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 1rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.625rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -172,12 +205,12 @@ export const config = { ${tokens.textWrapperHeight}: 2.5rem; ${tokens.textWrapperPadding}: 0.688rem 0.875rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -193,8 +226,8 @@ export const config = { }, inputBackgroundType: { fill: css` - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimary}; `, clear: css` ${tokens.backgroundColor}: transparent; diff --git a/packages/sdds-scan/src/components/Pagination/Pagination.config.ts b/packages/sdds-scan/src/components/Pagination/Pagination.config.ts index adc94c99685..e648ac1f0e1 100644 --- a/packages/sdds-scan/src/components/Pagination/Pagination.config.ts +++ b/packages/sdds-scan/src/components/Pagination/Pagination.config.ts @@ -1,3 +1,29 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,129 +35,129 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; ${paginationTokens.inputBorderColor}:transparent; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, }, size: { m: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; @@ -167,12 +193,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; diff --git a/packages/sdds-scan/src/components/Popover/Popover.config.ts b/packages/sdds-scan/src/components/Popover/Popover.config.ts index 2f9acaf14e8..358cf33a503 100644 --- a/packages/sdds-scan/src/components/Popover/Popover.config.ts +++ b/packages/sdds-scan/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/sdds-scan/src/components/Progress/Progress.config.ts b/packages/sdds-scan/src/components/Progress/Progress.config.ts index c4d4b3cf4d4..24afc890249 100644 --- a/packages/sdds-scan/src/components/Progress/Progress.config.ts +++ b/packages/sdds-scan/src/components/Progress/Progress.config.ts @@ -1,3 +1,14 @@ +import { + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +19,39 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, primary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, success: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, error: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/sdds-scan/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/sdds-scan/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index e33336b6994..d3172f83df7 100644 --- a/packages/sdds-scan/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/sdds-scan/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +70,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -63,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -76,12 +96,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -89,12 +109,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -102,12 +122,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -115,12 +135,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -128,12 +148,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-scan/src/components/Radiobox/Radiobox.config.ts b/packages/sdds-scan/src/components/Radiobox/Radiobox.config.ts index f4b61c310f6..dd0fd6a7ff9 100644 --- a/packages/sdds-scan/src/components/Radiobox/Radiobox.config.ts +++ b/packages/sdds-scan/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,11 @@ +import { + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + textAccent, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,18 +29,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,18 +52,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, /** @@ -63,11 +71,11 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -78,7 +86,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-scan/src/components/Range/Range.config.ts b/packages/sdds-scan/src/components/Range/Range.config.ts index 4c01e5d85b0..162d5463fae 100644 --- a/packages/sdds-scan/src/components/Range/Range.config.ts +++ b/packages/sdds-scan/src/components/Range/Range.config.ts @@ -1,3 +1,31 @@ +import { + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,55 +38,55 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorHover}: var(--surface-transparent-negative-hover); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorHover}: var(--surface-transparent-positive-hover); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -66,12 +94,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -79,24 +107,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -114,22 +142,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -142,12 +170,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -155,24 +183,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -190,22 +218,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -217,10 +245,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -233,12 +261,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -257,12 +285,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -280,16 +308,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-scan/src/components/Rating/Rating.config.ts b/packages/sdds-scan/src/components/Rating/Rating.config.ts index 7df85f17223..d63016464c7 100644 --- a/packages/sdds-scan/src/components/Rating/Rating.config.ts +++ b/packages/sdds-scan/src/components/Rating/Rating.config.ts @@ -1,3 +1,13 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +18,36 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; // TODO: change with token data-yellow, when it will be added to theme ${tokens.iconColor}: #F3A912; - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { m: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -48,19 +58,19 @@ export const config = { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; diff --git a/packages/sdds-scan/src/components/Segment/SegmentGroup.config.ts b/packages/sdds-scan/src/components/Segment/SegmentGroup.config.ts index daa89bdb3b4..34281f1b86c 100644 --- a/packages/sdds-scan/src/components/Segment/SegmentGroup.config.ts +++ b/packages/sdds-scan/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +9,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -49,7 +50,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary}; `, }, orientation: { diff --git a/packages/sdds-scan/src/components/Segment/SegmentItem.config.ts b/packages/sdds-scan/src/components/Segment/SegmentItem.config.ts index 9bd6d128981..229f0094440 100644 --- a/packages/sdds-scan/src/components/Segment/SegmentItem.config.ts +++ b/packages/sdds-scan/src/components/Segment/SegmentItem.config.ts @@ -1,3 +1,23 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,68 +28,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -83,12 +103,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -100,12 +120,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-scan/src/components/Select/Select.config.ts b/packages/sdds-scan/src/components/Select/Select.config.ts index d11659289ea..48bbf84ff0a 100644 --- a/packages/sdds-scan/src/components/Select/Select.config.ts +++ b/packages/sdds-scan/src/components/Select/Select.config.ts @@ -1,3 +1,74 @@ +import { + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + onLightTextSecondaryActive, + onLightTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,328 +81,328 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, accent: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-accent); - ${tokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-accent-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceAccent}; + ${tokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, secondary: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, clear: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-active); - ${tokens.buttonBackgroundColor}: var(--surface-clear); - ${tokens.buttonBackgroundColorHover}: var(--surface-clear); - ${tokens.buttonBackgroundColorActive}: var(--surface-clear); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryActive}; + ${tokens.buttonBackgroundColor}: ${surfaceClear}; + ${tokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${tokens.buttonBackgroundColorActive}: ${surfaceClear}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, dark: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-transparent-deep); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceTransparentDeep}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceTransparentDeepHover}; + ${tokens.buttonBackgroundColorActive}:${onLightSurfaceTransparentDeepActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, black: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, white: css` - ${tokens.buttonColor}: var(--on-light-text-primary); - ${tokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-light-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-light-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-light-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-light-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-dark-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); - - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - - ${tokens.itemIconColor}: var(--text-accent); - - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.buttonColor}: ${onLightTextPrimary}; + ${tokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onLightTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onLightTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onLightTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onLightTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onDarkSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onDarkSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}:${onDarkSurfaceSolidDefaultActive}; + + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.itemIconColor}: ${textAccent}; + + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -351,20 +422,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -372,12 +443,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -400,12 +471,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -431,19 +502,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -476,20 +547,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -497,12 +568,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -525,12 +596,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; @@ -556,19 +627,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -588,69 +659,69 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--on-dark-text-primary); - ${tokens.textFieldChipColorHover}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${onDarkTextPrimary}; + ${tokens.textFieldChipColorHover}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -663,12 +734,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -687,12 +758,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -712,12 +783,12 @@ export const config = { true: css` ${tokens.disclosureIconOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-scan/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-scan/src/components/Skeleton/LineSkeleton.config.ts index 75d2ee7a606..11cca52b44a 100644 --- a/packages/sdds-scan/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-scan/src/components/Skeleton/LineSkeleton.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + dsplL, + dsplM, + dsplS, + h1, + h2, + h3, + h4, + h5, + h6, + surfaceSkeletonDeepGradient, + surfaceSkeletonGradient, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textL, + textM, + textS, + textXS, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, skeletonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,88 +32,88 @@ export const config = { variations: { view: { default: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient, var(--surface-skeleton-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, lighter: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient-lighter, var(--surface-skeleton-deep-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonDeepGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, }, size: { bodyL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size); + ${skeletonTokens.lineHeight}: ${bodyL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyL.fontSize}; `, bodyM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size); + ${skeletonTokens.lineHeight}: ${bodyM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyM.fontSize}; `, bodyS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size); + ${skeletonTokens.lineHeight}: ${bodyS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyS.fontSize}; `, bodyXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXS.fontSize}; `, bodyXXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXXS.fontSize}; `, dsplL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size); + ${skeletonTokens.lineHeight}: ${dsplL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplL.fontSize}; `, dsplM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size); + ${skeletonTokens.lineHeight}: ${dsplM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplM.fontSize}; `, dsplS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size); + ${skeletonTokens.lineHeight}: ${dsplS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplS.fontSize}; `, h1: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size); + ${skeletonTokens.lineHeight}: ${h1.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h1.fontSize}; `, h2: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size); + ${skeletonTokens.lineHeight}: ${h2.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h2.fontSize}; `, h3: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size); + ${skeletonTokens.lineHeight}: ${h3.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h3.fontSize}; `, h4: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size); + ${skeletonTokens.lineHeight}: ${h4.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h4.fontSize}; `, h5: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); + ${skeletonTokens.lineHeight}: ${h5.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h5.fontSize}; `, h6: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + ${skeletonTokens.lineHeight}: ${h6.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h6.fontSize}; `, textL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); + ${skeletonTokens.lineHeight}: ${textL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textL.fontSize}; `, textM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size); + ${skeletonTokens.lineHeight}: ${textM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textM.fontSize}; `, textS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size); + ${skeletonTokens.lineHeight}: ${textS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textS.fontSize}; `, textXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size); + ${skeletonTokens.lineHeight}: ${textXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textXS.fontSize}; `, }, }, diff --git a/packages/sdds-scan/src/components/Slider/Slider.config.ts b/packages/sdds-scan/src/components/Slider/Slider.config.ts index c171f134490..c024d7c7ed2 100644 --- a/packages/sdds-scan/src/components/Slider/Slider.config.ts +++ b/packages/sdds-scan/src/components/Slider/Slider.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + surfaceAccent, + surfaceAccentGradient, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +25,70 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, gradient: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent-gradient); + ${sliderTokens.fillColor}: ${surfaceAccentGradient}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, }, size: { @@ -85,24 +102,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -119,12 +136,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -136,24 +153,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -170,12 +187,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -187,24 +204,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -221,12 +238,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-scan/src/components/Steps/Steps.config.ts b/packages/sdds-scan/src/components/Steps/Steps.config.ts index ee1ee5e1e98..e3f3344cbe9 100644 --- a/packages/sdds-scan/src/components/Steps/Steps.config.ts +++ b/packages/sdds-scan/src/components/Steps/Steps.config.ts @@ -1,42 +1,72 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -47,10 +77,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -60,26 +90,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -100,33 +130,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.5rem; ${tokens.largeBulletIndentHeight}: 1.25rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyL.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyM.fontFamily}; + ${tokens.contentFontSize}: ${bodyM.fontSize}; + ${tokens.contentFontStyle}: ${bodyM.fontStyle}; + ${tokens.contentFontWeight}: ${bodyM.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyM.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -147,33 +177,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -194,33 +224,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -241,33 +271,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 0.75rem; ${tokens.largeBulletIndentHeight}: 0.5rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -278,8 +308,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/sdds-scan/src/components/Switch/Switch.config.ts b/packages/sdds-scan/src/components/Switch/Switch.config.ts index 8a08bd686d8..50b71af500e 100644 --- a/packages/sdds-scan/src/components/Switch/Switch.config.ts +++ b/packages/sdds-scan/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,50 +24,50 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -83,17 +96,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -104,7 +117,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-scan/src/components/Table/Table.config.ts b/packages/sdds-scan/src/components/Table/Table.config.ts index 770fa22b6d8..9017a843c59 100644 --- a/packages/sdds-scan/src/components/Table/Table.config.ts +++ b/packages/sdds-scan/src/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + surfaceTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +28,12 @@ export const config = { }, size: { l: css` - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.headerRowHeight}: 3.125rem; ${tokens.rowHeight}: 3.125rem; @@ -31,9 +43,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.5rem; ${tokens.editableCellIconButtonWidth}: 3rem; @@ -42,18 +54,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.875rem; ${tokens.editableCellInputPadding}: 0 0.75rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.75rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.875rem; @@ -63,12 +75,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -76,20 +88,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.5rem 0.875rem; ${tokens.selectControlPanelGap}: 0.5rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight}; `, m: css` - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.headerRowHeight}: 2.75rem; ${tokens.rowHeight}: 2.75rem; @@ -99,9 +111,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.375rem; ${tokens.editableCellIconButtonWidth}: 2.5rem; @@ -110,18 +122,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.625rem; ${tokens.editableCellInputPadding}: 0 0.625rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.75rem; @@ -131,12 +143,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -144,20 +156,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.75rem; ${tokens.selectControlPanelGap}: 0.625rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, s: css` - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.headerRowHeight}: 2.125rem; ${tokens.rowHeight}: 2.125rem; @@ -167,9 +179,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.25rem; ${tokens.editableCellIconButtonWidth}: 2rem; @@ -178,18 +190,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.5rem; ${tokens.editableCellInputPadding}: 0 0.375rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.25rem 0.5rem; ${tokens.buttonHeight}: 1.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.625rem; @@ -199,12 +211,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.25rem 0 0; ${tokens.selectItemIconSize}: 1rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 0.875rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -212,12 +224,12 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.5rem; ${tokens.selectControlPanelGap}: 0.25rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 98f63525361..f27d3b1ed33 100644 --- a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,13 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,78 +18,78 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; diff --git a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index e787e337dd2..ab3af1988dd 100644 --- a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,26 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h1, + h2, + h3, + h4, + h5, + inverseTextPrimary, + inverseTextSecondary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,106 +31,106 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -123,12 +146,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -142,12 +165,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -161,12 +184,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -178,12 +201,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -195,12 +218,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -212,12 +235,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -229,12 +252,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -246,12 +269,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabs.config.ts index 0f7f88ba4b7..595cdadeb55 100644 --- a/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-scan/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +16,36 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(--text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(--text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(--text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-scan/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/sdds-scan/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index b97462e6793..e47dc635cf8 100644 --- a/packages/sdds-scan/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/sdds-scan/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/sdds-scan/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-scan/src/components/Tabs/vertical/VerticalTabItem.config.ts index 175890e41a7..a5b2d6d0288 100644 --- a/packages/sdds-scan/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-scan/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,17 @@ +import { + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +22,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +63,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -69,12 +83,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -89,12 +103,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/sdds-scan/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/sdds-scan/src/components/Tabs/vertical/VerticalTabs.config.ts index ca42552d2a5..7402fdd7fe5 100644 --- a/packages/sdds-scan/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/sdds-scan/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(--text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-scan/src/components/TextArea/TextArea.config.ts b/packages/sdds-scan/src/components/TextArea/TextArea.config.ts index 25139559461..b6dea63c08e 100644 --- a/packages/sdds-scan/src/components/TextArea/TextArea.config.ts +++ b/packages/sdds-scan/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,39 @@ +import { + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,172 +45,172 @@ export const config = { variations: { view: { default: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-primary); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-primary); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-positive); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-positive); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-positive); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textPositive}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-warning); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-warning); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-warning); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textWarning}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-negative); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-negative); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -203,30 +239,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -246,12 +282,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -278,30 +314,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.5rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -319,20 +355,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -345,12 +381,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -369,12 +405,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -388,18 +424,18 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-scan/src/components/TextField/TextField.config.ts b/packages/sdds-scan/src/components/TextField/TextField.config.ts index a6c1942228c..2169a19dcc7 100644 --- a/packages/sdds-scan/src/components/TextField/TextField.config.ts +++ b/packages/sdds-scan/src/components/TextField/TextField.config.ts @@ -1,3 +1,55 @@ +import { + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,120 +61,120 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-positive); - ${tokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPositive}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-warning); - ${tokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentWarning}; + ${tokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -140,20 +192,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -161,20 +213,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -187,12 +239,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -218,20 +270,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -239,20 +291,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -265,12 +317,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -285,126 +337,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -417,12 +469,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -441,12 +493,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -465,13 +517,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-scan/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/sdds-scan/src/components/TextFieldGroup/TextFieldGroup.config.ts index 19322ddd181..081fe924f2c 100644 --- a/packages/sdds-scan/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/sdds-scan/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -77,28 +78,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -111,12 +112,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-scan/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-scan/src/components/TimePicker/TimePicker.config.ts index d992aba1a15..b122387b33e 100644 --- a/packages/sdds-scan/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-scan/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,45 +33,45 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; - ${tokens.labelColor}: var(--text-primary); + ${tokens.labelColor}: ${textPrimary}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); + ${tokens.timePickerShadow}: ${shadowDownSoftS}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -63,12 +86,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -80,12 +103,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -103,25 +126,37 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + ${tokens.hintMargin}: -0.688rem -0.5rem; + ${tokens.hintTargetSize}: 2.375rem; + ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; + ${tokens.scrollbarMargin}: 0.5rem; `, m: css` ${tokens.width}: 20rem; @@ -134,12 +169,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -151,12 +186,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -174,34 +209,34 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -217,12 +252,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -234,12 +269,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -257,34 +292,34 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.813rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -300,12 +335,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -317,12 +352,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -340,34 +375,34 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -438,13 +473,13 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-scan/src/components/Toast/Toast.config.ts b/packages/sdds-scan/src/components/Toast/Toast.config.ts index 9678f1dd594..8f0ead17c74 100644 --- a/packages/sdds-scan/src/components/Toast/Toast.config.ts +++ b/packages/sdds-scan/src/components/Toast/Toast.config.ts @@ -1,3 +1,17 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,49 +23,49 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-positive); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textPositive}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-negative); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textNegative}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary); + ${toastTokens.closeIconColor}: ${onDarkTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary); + ${toastTokens.closeIconColor}: ${onLightTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextSecondary}; `, }, size: { @@ -59,12 +73,12 @@ export const config = { ${toastTokens.borderRadius}: 0.75rem; ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/sdds-scan/src/components/Toolbar/Toolbar.config.ts b/packages/sdds-scan/src/components/Toolbar/Toolbar.config.ts index 6627d05f4dc..67325655321 100644 --- a/packages/sdds-scan/src/components/Toolbar/Toolbar.config.ts +++ b/packages/sdds-scan/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/sdds-scan/src/components/Tooltip/Tooltip.config.ts b/packages/sdds-scan/src/components/Tooltip/Tooltip.config.ts index c1a824478b5..d1b1b5a7e91 100644 --- a/packages/sdds-scan/src/components/Tooltip/Tooltip.config.ts +++ b/packages/sdds-scan/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,4 @@ +import { bodyS, bodyXS, surfaceSolidCardBrightness, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,9 +10,9 @@ export const config = { view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.color}: ${textPrimary}; `, }, size: { @@ -24,12 +25,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -38,7 +39,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -49,12 +50,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -63,7 +64,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-scan/src/components/Tree/Tree.config.ts b/packages/sdds-scan/src/components/Tree/Tree.config.ts index e8cbfce73a6..f841cf1c073 100644 --- a/packages/sdds-scan/src/components/Tree/Tree.config.ts +++ b/packages/sdds-scan/src/components/Tree/Tree.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,24 +24,24 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -53,12 +69,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.itemHeight}: 3.5rem; @@ -84,12 +100,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.itemHeight}: 3rem; @@ -115,12 +131,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -146,12 +162,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.itemHeight}: 2rem; @@ -177,12 +193,12 @@ export const config = { ${tokens.checkboxInnerSize}: 0.875rem; ${tokens.checkboxBorderRadius}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-scan/src/components/Typography/Body.config.ts b/packages/sdds-scan/src/components/Typography/Body.config.ts index 23927fdf18c..60d2da535f3 100644 --- a/packages/sdds-scan/src/components/Typography/Body.config.ts +++ b/packages/sdds-scan/src/components/Typography/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-scan/src/components/Typography/Dspl.config.ts b/packages/sdds-scan/src/components/Typography/Dspl.config.ts index 3fb1245a027..9d7e3b0476f 100644 --- a/packages/sdds-scan/src/components/Typography/Dspl.config.ts +++ b/packages/sdds-scan/src/components/Typography/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +18,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +38,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +58,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/sdds-scan/src/components/Typography/Heading.config.ts b/packages/sdds-scan/src/components/Typography/Heading.config.ts index 77f16729129..1c30c458f0a 100644 --- a/packages/sdds-scan/src/components/Typography/Heading.config.ts +++ b/packages/sdds-scan/src/components/Typography/Heading.config.ts @@ -1,3 +1,23 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, + h6, + h6Bold, + h6Medium, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configH1 = { @@ -7,14 +27,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +46,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +65,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +84,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +103,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, @@ -102,14 +122,14 @@ export const configH6 = { variations: { size: { h6: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + ${typographyTokens.typoFontFamily}: ${h6.fontFamily}; + ${typographyTokens.typoFontSize}: ${h6.fontSize}; + ${typographyTokens.typoFontStyle}: ${h6.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h6.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h6Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h6Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h6.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h6.lineHeight}; `, }, }, diff --git a/packages/sdds-scan/src/components/Typography/Text.config.ts b/packages/sdds-scan/src/components/Typography/Text.config.ts index 542bc09a87d..96ad4193845 100644 --- a/packages/sdds-scan/src/components/Typography/Text.config.ts +++ b/packages/sdds-scan/src/components/Typography/Text.config.ts @@ -1,3 +1,17 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_scan'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +21,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +41,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +61,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +81,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, From ab4437c765b1c00b89524f1f6e9ff7ed9540c8d0 Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 20:34:49 +0300 Subject: [PATCH 20/24] chore(sdds-serv): use theme tokens in component configs --- .../components/Accordion/Accordion.config.ts | 285 +++-- .../src/components/Attach/Attach.config.ts | 899 +++++++------- .../Autocomplete/Autocomplete.config.ts | 553 +++++---- .../src/components/Badge/Badge.config.ts | 148 ++- .../Breadcrumbs/Breadcrumbs.config.ts | 68 +- .../src/components/Button/Button.config.ts | 258 ++-- .../ButtonGroup/ButtonGroup.config.ts | 300 +++-- .../components/Calendar/Calendar.config.ts | 460 ++++---- .../Calendar/CalendarDouble.config.ts | 460 ++++---- .../src/components/Card/Card.config.ts | 3 +- .../components/Carousel/Carousel.config.ts | 24 +- .../src/components/Cell/Cell.config.ts | 169 +-- .../components/Checkbox/Checkbox.config.ts | 156 +-- .../components/ChipGroup/ChipGroup.config.ts | 102 +- .../components/CodeField/CodeField.config.ts | 85 +- .../components/Combobox/Combobox.config.ts | 753 ++++++------ .../src/components/Counter/Counter.config.ts | 103 +- .../DatePicker/DatePicker.clear.config.ts | 1035 ++++++++-------- .../DatePicker/DatePicker.config.ts | 1022 ++++++++-------- .../DateTimePicker/DateTimePicker.config.ts | 954 ++++++++------- .../src/components/Divider/Divider.config.ts | 14 +- .../src/components/Drawer/Drawer.config.ts | 14 +- .../components/Dropdown/Dropdown.config.ts | 132 ++- .../components/Dropzone/Dropzone.config.ts | 53 +- .../EmbedIconButton/EmbedIconButton.config.ts | 125 +- .../EmptyState/EmptyState.config.ts | 49 +- .../src/components/File/File.config.ts | 158 +-- .../IconButton/IconButton.config.ts | 182 +-- .../InformationWrapper.config.ts | 295 ++--- .../LinkButton/LinkButton.config.ts | 210 ++-- .../src/components/List/List.config.ts | 77 +- .../src/components/Loader/Loader.config.ts | 181 +-- .../src/components/Modal/Modal.config.ts | 20 +- .../src/components/Note/Note.config.ts | 164 +-- .../Notification/Notification.config.ts | 196 +-- .../NumberInput/NumberInput.config.ts | 289 +++-- .../Pagination/Pagination.config.ts | 220 ++-- .../src/components/Popover/Popover.config.ts | 5 +- .../components/Progress/Progress.config.ts | 60 +- .../ProgressBarCircular.config.ts | 146 ++- .../components/Radiobox/Radiobox.config.ts | 154 +-- .../components/Range/Range.clear.config.ts | 484 ++++---- .../src/components/Range/Range.config.ts | 467 ++++---- .../src/components/Rating/Rating.config.ts | 385 +++--- .../components/Segment/SegmentGroup.config.ts | 11 +- .../components/Segment/SegmentItem.config.ts | 168 +-- .../src/components/Select/Select.config.ts | 1046 +++++++++-------- .../Skeleton/LineSkeleton.config.ts | 108 +- .../src/components/Slider/Slider.config.ts | 209 ++-- .../src/components/Steps/Steps.config.ts | 332 +++--- .../src/components/Switch/Switch.config.ts | 103 +- .../src/components/Table/Table.config.ts | 180 +-- .../HorizontalIconTabItem.config.ts | 70 +- .../horizontal/HorizontalTabItem.config.ts | 258 ++-- .../Tabs/horizontal/HorizontalTabs.config.ts | 36 +- .../vertical/VerticalIconTabItem.config.ts | 23 +- .../Tabs/vertical/VerticalTabItem.config.ts | 90 +- .../Tabs/vertical/VerticalTabs.config.ts | 17 +- .../TextArea/TextArea.clear.config.ts | 443 +++---- .../components/TextArea/TextArea.config.ts | 642 +++++----- .../TextField/TextField.clear.config.ts | 789 +++++++------ .../components/TextField/TextField.config.ts | 811 +++++++------ .../TextFieldGroup/TextFieldGroup.config.ts | 193 +-- .../TextFieldSlider.clear.config.ts | 606 +++++----- .../TextFieldSlider/TextFieldSlider.config.ts | 658 ++++++----- .../TimePicker/TimePicker.config.ts | 331 +++--- .../src/components/Toast/Toast.config.ts | 70 +- .../src/components/Toolbar/Toolbar.config.ts | 11 +- .../src/components/Tooltip/Tooltip.config.ts | 33 +- .../src/components/Tree/Tree.config.ts | 106 +- .../src/components/Typography/Body.config.ts | 97 +- .../src/components/Typography/Dspl.config.ts | 59 +- .../components/Typography/Heading.config.ts | 116 +- .../src/components/Typography/Text.config.ts | 78 +- 74 files changed, 10598 insertions(+), 9013 deletions(-) diff --git a/packages/sdds-serv/src/components/Accordion/Accordion.config.ts b/packages/sdds-serv/src/components/Accordion/Accordion.config.ts index d70ce2c93e6..40e06b5aec6 100644 --- a/packages/sdds-serv/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-serv/src/components/Accordion/Accordion.config.ts @@ -1,3 +1,28 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, accordionTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,12 +36,12 @@ export const config = { ${accordionTokens.accordionGap}: 0.125rem; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); - ${accordionTokens.accordionItemBackground}: var(--surface-solid-card); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); - ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBackground}: ${surfaceSolidCard}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; + ${accordionTokens.accordionBackground}: ${surfaceClear}; ${accordionTokens.accordionItemBorderBottom}: 0; ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, @@ -24,14 +49,14 @@ export const config = { ${accordionTokens.accordionGap}: 0; ${accordionTokens.accordionWidth}: 20rem; ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) 0rem; - ${accordionTokens.accordionItemBackground}: var(--surface-clear); - ${accordionTokens.accordionItemTitleColor}: var(--text-primary); - ${accordionTokens.accordionItemTextColor}: var(--text-primary); - ${accordionTokens.accordionItemIconColor}: var(--text-primary); - ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionItemBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemTitleColor}: ${textPrimary}; + ${accordionTokens.accordionItemTextColor}: ${textPrimary}; + ${accordionTokens.accordionItemIconColor}: ${textPrimary}; + ${accordionTokens.accordionItemFocus}: ${surfaceAccent}; ${accordionTokens.accordionItemBorderRadius}: 0rem !important; - ${accordionTokens.accordionBackground}: var(--surface-clear); - ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionBackground}: ${surfaceClear}; + ${accordionTokens.accordionItemBorderBottom}: 0.063rem solid ${surfaceSolidTertiary}; ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, @@ -42,19 +67,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.875rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyLBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyL.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -63,19 +88,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; @@ -84,19 +109,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.375rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-s-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodySBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -105,19 +130,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyXSBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyXS.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyXS.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyXS.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyXS.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyXS.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyXS.lineHeight}; `, h2: css` ${accordionTokens.accordionItemPaddingVertical}: 1rem; @@ -126,19 +151,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h2-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h2-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h2-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h2-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h2.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h2.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h2.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h2Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h2.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h2.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h3: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; @@ -147,19 +172,19 @@ export const config = { ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemIconSize}: 1.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h3-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h3-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h3-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h3-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-l-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h3.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h3.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h3.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h3Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h3.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h3.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyL.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyL.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyL.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyL.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyL.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyL.lineHeight}; `, h4: css` ${accordionTokens.accordionItemPaddingVertical}: 0.688rem; @@ -167,19 +192,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h4-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h4-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h4-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h4-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h4.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h5: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -187,19 +212,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h5-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h5-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h5-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h5-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, h6: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; @@ -207,19 +232,19 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-h6-font-family); - ${accordionTokens.accordionItemTitleFontSize}: var(--plasma-typo-h6-font-size); - ${accordionTokens.accordionItemTitleFontStyle}: var(--plasma-typo-h6-font-style); - ${accordionTokens.accordionItemTitleFontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${accordionTokens.accordionItemTitleLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${accordionTokens.accordionItemTitleLineHeight}: var(--plasma-typo-h6-line-height); - - ${accordionTokens.accordionItemTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${accordionTokens.accordionItemTextFontSize}: var(--plasma-typo-body-m-font-size); - ${accordionTokens.accordionItemTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${accordionTokens.accordionItemTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${accordionTokens.accordionItemTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${accordionTokens.accordionItemTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h6Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight}; + + ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTextFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTextFontWeight}: ${bodyM.fontWeight}; + ${accordionTokens.accordionItemTextLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTextLineHeight}: ${bodyM.lineHeight}; `, }, }, diff --git a/packages/sdds-serv/src/components/Attach/Attach.config.ts b/packages/sdds-serv/src/components/Attach/Attach.config.ts index b62ab061eec..7571af44690 100644 --- a/packages/sdds-serv/src/components/Attach/Attach.config.ts +++ b/packages/sdds-serv/src/components/Attach/Attach.config.ts @@ -1,3 +1,54 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, attachTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,439 +61,439 @@ export const config = { variations: { view: { default: css` - ${attachTokens.buttonColor}: var(--inverse-text-primary); - ${attachTokens.buttonValueColor}: var(--inverse-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.buttonColor}: ${inverseTextPrimary}; + ${attachTokens.buttonValueColor}: ${inverseTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--inverse-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${inverseTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${attachTokens.iconButtonColor}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--inverse-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, accent: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-accent); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceAccent}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, secondary: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.buttonColorActive}: var(--text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.buttonColorHover}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.buttonColorActive}: ${textPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${attachTokens.iconButtonColorActive}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${attachTokens.iconButtonColorHover}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${attachTokens.iconButtonColorActive}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, clear: css` - ${attachTokens.buttonColor}: var(--text-primary); - ${attachTokens.buttonValueColor}: var(--text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-clear); + ${attachTokens.buttonColor}: ${textPrimary}; + ${attachTokens.buttonValueColor}: ${textSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceClear}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--text-primary-hover); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.buttonColorActive}: var(--text-primary-active); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.buttonColorHover}: ${textPrimaryHover}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.buttonColorActive}: ${textPrimaryActive}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonColor}: ${textPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--text-primary-hover); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonColorActive}: var(--text-primary-active); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonColorActive}: ${textPrimaryActive}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, success: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-positive); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfacePositive}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, warning: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-warning); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceWarning}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, critical: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--surface-negative); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${surfaceNegative}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--surface-negative-active); - - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; + + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, dark: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, black: css` - ${attachTokens.buttonColor}: var(--on-dark-text-primary); - ${attachTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.buttonColor}: ${onDarkTextPrimary}; + ${attachTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-dark-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-dark-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onDarkTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, white: css` - ${attachTokens.buttonColor}: var(--on-light-text-primary); - ${attachTokens.buttonValueColor}: var(--on-light-text-secondary); - ${attachTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.buttonColor}: ${onLightTextPrimary}; + ${attachTokens.buttonValueColor}: ${onLightTextSecondary}; + ${attachTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.buttonLoadingBackgroundColor}: var(${attachTokens.buttonBackgroundColor}); - ${attachTokens.buttonColorHover}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.buttonColorActive}: var(--on-light-text-primary); - ${attachTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.buttonColorHover}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.buttonColorActive}: ${onLightTextPrimary}; + ${attachTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.buttonDisabledOpacity}: 0.4; - ${attachTokens.buttonFocusColor}: var(--surface-accent); + ${attachTokens.buttonFocusColor}: ${surfaceAccent}; - ${attachTokens.cellColor}: var(--text-primary); - ${attachTokens.cellLabelColor}: var(--text-secondary); - ${attachTokens.cellTitleColor}: var(--text-primary); - ${attachTokens.cellSubtitleColor}: var(--text-secondary); + ${attachTokens.cellColor}: ${textPrimary}; + ${attachTokens.cellLabelColor}: ${textSecondary}; + ${attachTokens.cellTitleColor}: ${textPrimary}; + ${attachTokens.cellSubtitleColor}: ${textSecondary}; ${attachTokens.cellBackgroundColor}: transparent; - ${attachTokens.iconButtonColor}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${attachTokens.iconButtonColor}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${attachTokens.iconButtonLoadingBackgroundColor}: var(${attachTokens.iconButtonBackgroundColor}); - ${attachTokens.iconButtonColorHover}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${attachTokens.iconButtonColorActive}: var(--on-light-text-primary); - ${attachTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${attachTokens.iconButtonColorHover}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${attachTokens.iconButtonColorActive}: ${onLightTextPrimary}; + ${attachTokens.iconButtonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; ${attachTokens.iconButtonDisabledOpacity}: 0.4; - ${attachTokens.iconButtonFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonFocusColor}: ${surfaceAccent}; - ${attachTokens.iconButtonCancelColor}: var(--text-secondary); - ${attachTokens.iconButtonCancelBackgroundColor}: var(--surface-clear); + ${attachTokens.iconButtonCancelColor}: ${textSecondary}; + ${attachTokens.iconButtonCancelBackgroundColor}: ${surfaceClear}; ${attachTokens.iconButtonCancelLoadingBackgroundColor}: var(${attachTokens.iconButtonCancelBackgroundColor}); - ${attachTokens.iconButtonCancelColorHover}: var(--text-secondary-hover); - ${attachTokens.iconButtonCancelBackgroundColorHover}: var(--surface-clear); - ${attachTokens.iconButtonCancelColorActive}: var(--text-secondary-active); - ${attachTokens.iconButtonCancelBackgroundColorActive}: var(--surface-clear); + ${attachTokens.iconButtonCancelColorHover}: ${textSecondaryHover}; + ${attachTokens.iconButtonCancelBackgroundColorHover}: ${surfaceClear}; + ${attachTokens.iconButtonCancelColorActive}: ${textSecondaryActive}; + ${attachTokens.iconButtonCancelBackgroundColorActive}: ${surfaceClear}; ${attachTokens.iconButtonCancelDisabledOpacity}: 0.4; - ${attachTokens.iconButtonCancelFocusColor}: var(--surface-accent); + ${attachTokens.iconButtonCancelFocusColor}: ${surfaceAccent}; - ${attachTokens.moreIconColor}: var(--text-primary); + ${attachTokens.moreIconColor}: ${textPrimary}; `, }, helperTextView: { default: css` - ${attachTokens.helperTextColor}: var(--text-secondary); + ${attachTokens.helperTextColor}: ${textSecondary}; `, negative: css` - ${attachTokens.helperTextColor}: var(--text-negative); + ${attachTokens.helperTextColor}: ${textNegative}; `, }, size: { @@ -457,12 +508,12 @@ export const config = { ${attachTokens.buttonWidth}: 12.5rem; ${attachTokens.buttonPadding}: 1.5rem; ${attachTokens.buttonRadius}: 0.875rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyL.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -481,37 +532,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonHeight}: 3.5rem; ${attachTokens.iconButtonWidth}: 3.5rem; ${attachTokens.iconButtonPadding}: 1.5rem; ${attachTokens.iconButtonRadius}: 0.875rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -520,12 +571,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -547,12 +598,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1.25rem; ${attachTokens.buttonRadius}: 0.75rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyM.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -571,37 +622,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonHeight}: 3rem; ${attachTokens.iconButtonWidth}: 3rem; ${attachTokens.iconButtonPadding}: 1.25rem; ${attachTokens.iconButtonRadius}: 0.75rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -610,12 +661,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -637,12 +688,12 @@ export const config = { ${attachTokens.buttonWidth}: 11.25rem; ${attachTokens.buttonPadding}: 1rem; ${attachTokens.buttonRadius}: 0.625rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1.375rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -661,37 +712,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.375rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2.5rem; ${attachTokens.iconButtonWidth}: 2.5rem; ${attachTokens.iconButtonPadding}: 1rem; ${attachTokens.iconButtonRadius}: 0.625rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1.375rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -700,12 +751,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; @@ -727,12 +778,12 @@ export const config = { ${attachTokens.buttonWidth}: 10rem; ${attachTokens.buttonPadding}: 0.75rem; ${attachTokens.buttonRadius}: 0.5rem; - ${attachTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.buttonSpinnerSize}: 1rem; ${attachTokens.buttonSpinnerColor}: inherit; @@ -751,37 +802,37 @@ export const config = { ${attachTokens.cellTextboxGap}: 0.125rem; ${attachTokens.cellGap}: 0.25rem; - ${attachTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${attachTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${attachTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${attachTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${attachTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${attachTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonHeight}: 2rem; ${attachTokens.iconButtonWidth}: 2rem; ${attachTokens.iconButtonPadding}: 0.75rem; ${attachTokens.iconButtonRadius}: 0.5rem; - ${attachTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonSpinnerSize}: 1rem; ${attachTokens.iconButtonSpinnerColor}: inherit; @@ -790,12 +841,12 @@ export const config = { ${attachTokens.iconButtonCancelWidth}: 2rem; ${attachTokens.iconButtonCancelPadding}: 0.75rem; ${attachTokens.iconButtonCancelRadius}: 0.5rem; - ${attachTokens.iconButtonCancelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${attachTokens.iconButtonCancelFontSize}: var(--plasma-typo-body-xs-font-size); - ${attachTokens.iconButtonCancelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${attachTokens.iconButtonCancelFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${attachTokens.iconButtonCancelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${attachTokens.iconButtonCancelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${attachTokens.iconButtonCancelFontFamily}: ${bodyXS.fontFamily}; + ${attachTokens.iconButtonCancelFontSize}: ${bodyXS.fontSize}; + ${attachTokens.iconButtonCancelFontStyle}: ${bodyXS.fontStyle}; + ${attachTokens.iconButtonCancelFontWeight}: ${bodyXSBold.fontWeight}; + ${attachTokens.iconButtonCancelLetterSpacing}: ${bodyXS.letterSpacing}; + ${attachTokens.iconButtonCancelLineHeight}: ${bodyXS.lineHeight}; ${attachTokens.iconButtonCancelSpinnerSize}: 1rem; ${attachTokens.iconButtonCancelSpinnerColor}: inherit; diff --git a/packages/sdds-serv/src/components/Autocomplete/Autocomplete.config.ts b/packages/sdds-serv/src/components/Autocomplete/Autocomplete.config.ts index 445f4504839..2a763d3549d 100644 --- a/packages/sdds-serv/src/components/Autocomplete/Autocomplete.config.ts +++ b/packages/sdds-serv/src/components/Autocomplete/Autocomplete.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,172 +40,172 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-positive); - ${tokens.textFieldDividerColorHover}: var(--surface-positive); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfacePositive}; + ${tokens.textFieldDividerColorHover}: ${surfacePositive}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-warning); - ${tokens.textFieldDividerColorHover}: var(--surface-warning); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceWarning}; + ${tokens.textFieldDividerColorHover}: ${surfaceWarning}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.focusColor}: var(--surface-accent); - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColor}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--surface-negative); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.background}: var(--surface-solid-card); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.focusColor}: ${surfaceAccent}; + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldDividerColor}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${surfaceNegative}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceSolidCard}; ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${tokens.itemBackground}: transparent; - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemColor}: var(--text-primary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemColor}: ${textPrimary}; ${tokens.textFieldContentSlotColor}: ${tokens.textFieldColor}; ${tokens.textFieldContentSlotRightColor}: ${tokens.textFieldColor}; - ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + ${tokens.infiniteLoaderSpinnerColor}: ${textPrimary}; - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.textFieldHintIconColor}: ${textSecondary}; `, }, size: { @@ -193,21 +224,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -215,12 +246,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -240,12 +271,12 @@ export const config = { ${tokens.itemPadding}: 1.0625rem 1rem; ${tokens.itemBorderRadius}: 0.75rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; ${tokens.emptyStateGap}: 0.5rem; @@ -268,21 +299,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -290,12 +321,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -315,12 +346,12 @@ export const config = { ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; ${tokens.itemBorderRadius}: 0.625rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; ${tokens.emptyStateGap}: 0.375rem; @@ -343,21 +374,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -365,12 +396,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -390,12 +421,12 @@ export const config = { ${tokens.itemPadding}: 0.6875rem 0.75rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; ${tokens.emptyStateGap}: 0.25rem; @@ -418,21 +449,21 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; ${tokens.textFieldClearLabelOffset}: 0.25rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -440,12 +471,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -465,12 +496,12 @@ export const config = { ${tokens.itemPadding}: 0.5625rem 0.5rem; ${tokens.itemBorderRadius}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; ${tokens.emptyStateGap}: 0.25rem; @@ -481,22 +512,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -509,12 +540,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -533,12 +564,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -556,14 +587,14 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); - ${tokens.textFieldDividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; + ${tokens.textFieldDividerColorReadOnly}: ${surfaceTransparentPrimary}; `, }, }, diff --git a/packages/sdds-serv/src/components/Badge/Badge.config.ts b/packages/sdds-serv/src/components/Badge/Badge.config.ts index 3d8e8df196e..a47bee3ef43 100644 --- a/packages/sdds-serv/src/components/Badge/Badge.config.ts +++ b/packages/sdds-serv/src/components/Badge/Badge.config.ts @@ -1,3 +1,31 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkSurfaceTransparentCard, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentAccent, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, badgeTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +36,67 @@ export const config = { variations: { view: { default: css` - ${badgeTokens.color}: var(--inverse-text-primary); - ${badgeTokens.background}: var(--surface-solid-default); + ${badgeTokens.color}: ${inverseTextPrimary}; + ${badgeTokens.background}: ${surfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--text-primary); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-secondary); + ${badgeTokens.colorTransparent}: ${textPrimary}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentSecondary}; - ${badgeTokens.colorClear}: var(--text-primary); + ${badgeTokens.colorClear}: ${textPrimary}; `, accent: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-accent); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceAccent}; - ${badgeTokens.colorTransparent}: var(--text-accent); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-accent); + ${badgeTokens.colorTransparent}: ${textAccent}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentAccent}; - ${badgeTokens.colorClear}: var(--text-accent); + ${badgeTokens.colorClear}: ${textAccent}; `, positive: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-positive); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfacePositive}; - ${badgeTokens.colorTransparent}: var(--text-positive); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-positive); + ${badgeTokens.colorTransparent}: ${textPositive}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentPositive}; - ${badgeTokens.colorClear}: var(--text-positive); + ${badgeTokens.colorClear}: ${textPositive}; `, warning: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-warning); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceWarning}; - ${badgeTokens.colorTransparent}: var(--text-warning); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-warning); + ${badgeTokens.colorTransparent}: ${textWarning}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentWarning}; - ${badgeTokens.colorClear}: var(--text-warning); + ${badgeTokens.colorClear}: ${textWarning}; `, negative: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--surface-negative); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${surfaceNegative}; - ${badgeTokens.colorTransparent}: var(--text-negative); - ${badgeTokens.backgroundTransparent}: var(--surface-transparent-negative); + ${badgeTokens.colorTransparent}: ${textNegative}; + ${badgeTokens.backgroundTransparent}: ${surfaceTransparentNegative}; - ${badgeTokens.colorClear}: var(--text-negative); + ${badgeTokens.colorClear}: ${textNegative}; `, dark: css` - ${badgeTokens.color}: var(--on-dark-text-primary); - ${badgeTokens.background}: var(--on-light-surface-solid-default); + ${badgeTokens.color}: ${onDarkTextPrimary}; + ${badgeTokens.background}: ${onLightSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-light-surface-transparent-deep); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onLightSurfaceTransparentDeep}; - ${badgeTokens.colorClear}: var(--on-light-text-primary); + ${badgeTokens.colorClear}: ${onLightTextPrimary}; `, light: css` - ${badgeTokens.color}: var(--on-light-text-primary); - ${badgeTokens.background}: var(--on-dark-surface-solid-default); + ${badgeTokens.color}: ${onLightTextPrimary}; + ${badgeTokens.background}: ${onDarkSurfaceSolidDefault}; - ${badgeTokens.colorTransparent}: var(--on-dark-text-primary); - ${badgeTokens.backgroundTransparent}: var(--on-dark-surface-transparent-card); + ${badgeTokens.colorTransparent}: ${onDarkTextPrimary}; + ${badgeTokens.backgroundTransparent}: ${onDarkSurfaceTransparentCard}; - ${badgeTokens.colorClear}: var(--on-dark-text-primary); + ${badgeTokens.colorClear}: ${onDarkTextPrimary}; `, }, size: { @@ -78,12 +106,12 @@ export const config = { ${badgeTokens.padding}: 0 0.6875rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${badgeTokens.fontFamily}: ${bodyS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.25rem; @@ -97,12 +125,12 @@ export const config = { ${badgeTokens.padding}: 0 0.5625rem; ${badgeTokens.paddingIconOnly}: 0 0.375rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${badgeTokens.fontFamily}: ${bodyXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.1875rem; @@ -116,12 +144,12 @@ export const config = { ${badgeTokens.padding}: 0 0.4375rem; ${badgeTokens.paddingIconOnly}: 0 0.25rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -135,12 +163,12 @@ export const config = { ${badgeTokens.padding}: 0 0.25rem; ${badgeTokens.paddingIconOnly}: 0 0.188rem; - ${badgeTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${badgeTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${badgeTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${badgeTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${badgeTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${badgeTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${badgeTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${badgeTokens.fontSize}: ${bodyXXS.fontSize}; + ${badgeTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${badgeTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${badgeTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${badgeTokens.lineHeight}: ${bodyXXS.lineHeight}; ${badgeTokens.leftContentMarginLeft}: -0.0625rem; ${badgeTokens.leftContentMarginRight}: 0.125rem; @@ -159,7 +187,7 @@ export const config = { }, clear: { true: css` - ${badgeTokens.backgroundClear}: var(--surface-clear); + ${badgeTokens.backgroundClear}: ${surfaceClear}; `, }, }, diff --git a/packages/sdds-serv/src/components/Breadcrumbs/Breadcrumbs.config.ts b/packages/sdds-serv/src/components/Breadcrumbs/Breadcrumbs.config.ts index 1661a5df0e3..b0fe1a3175c 100644 --- a/packages/sdds-serv/src/components/Breadcrumbs/Breadcrumbs.config.ts +++ b/packages/sdds-serv/src/components/Breadcrumbs/Breadcrumbs.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, breadcrumbsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,53 +20,53 @@ export const config = { variations: { view: { default: css` - ${breadcrumbsTokens.breadcrumbsColor}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorText}: var(--text-primary); - ${breadcrumbsTokens.breadcrumbsColorSeparator}: var(--text-primary); + ${breadcrumbsTokens.breadcrumbsColor}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorText}: ${textPrimary}; + ${breadcrumbsTokens.breadcrumbsColorSeparator}: ${textPrimary}; ${breadcrumbsTokens.breadcrumbsOpacity}: 0.4; - ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: var(--surface-accent); + ${breadcrumbsTokens.breadcrumbsFocusOutlineColor}: ${surfaceAccent}; `, }, size: { l: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.5rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-l-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-l-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-l-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-l-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-l-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyL.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyL.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyL.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyLBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyL.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyL.lineHeight}; `, m: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.375rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-m-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-m-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-m-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-m-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-m-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyM.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyM.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyM.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyMBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyM.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyM.lineHeight}; `, s: css` ${breadcrumbsTokens.breadcrumbsGap}: 0.25rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-s-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-s-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-s-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-s-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-s-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodySBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${breadcrumbsTokens.breadcrumbsGap}: 0rem; - ${breadcrumbsTokens.breadcrumbsFontFamily}: var(--plasma-typo-body-xs-font-family); - ${breadcrumbsTokens.breadcrumbsFontSize}: var(--plasma-typo-body-xs-font-size); - ${breadcrumbsTokens.breadcrumbsFontStyle}: var(--plasma-typo-body-xs-font-style); - ${breadcrumbsTokens.breadcrumbsFontWeight}: var(--plasma-typo-body-xs-bold-weight); - ${breadcrumbsTokens.breadcrumbsLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${breadcrumbsTokens.breadcrumbsLineHeight}: var(--plasma-typo-body-xs-line-height); + ${breadcrumbsTokens.breadcrumbsFontFamily}: ${bodyXS.fontFamily}; + ${breadcrumbsTokens.breadcrumbsFontSize}: ${bodyXS.fontSize}; + ${breadcrumbsTokens.breadcrumbsFontStyle}: ${bodyXS.fontStyle}; + ${breadcrumbsTokens.breadcrumbsFontWeight}: ${bodyXSBold.fontWeight}; + ${breadcrumbsTokens.breadcrumbsLetterSpacing}: ${bodyXS.letterSpacing}; + ${breadcrumbsTokens.breadcrumbsLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-serv/src/components/Button/Button.config.ts b/packages/sdds-serv/src/components/Button/Button.config.ts index 5d4e666a7b9..013dcdb0683 100644 --- a/packages/sdds-serv/src/components/Button/Button.config.ts +++ b/packages/sdds-serv/src/components/Button/Button.config.ts @@ -1,3 +1,47 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,104 +53,104 @@ export const config = { variations: { view: { default: css` - ${buttonTokens.buttonColor}: var(--inverse-text-primary); - ${buttonTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${buttonTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonTokens.buttonColor}: var(--text-primary); - ${buttonTokens.buttonTextColor}: var(--text-primary); - ${buttonTokens.buttonIconColor}: var(--text-primary); - ${buttonTokens.buttonValueColor}: var(--text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColor}: ${textPrimary}; + ${buttonTokens.buttonTextColor}: ${textPrimary}; + ${buttonTokens.buttonIconColor}: ${textPrimary}; + ${buttonTokens.buttonValueColor}: ${textSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${buttonTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${buttonTokens.buttonColor}: var(--on-light-text-primary); - ${buttonTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor}); - ${buttonTokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${buttonTokens.buttonColorActive}: var(--on-light-text-primary-active); + ${buttonTokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${buttonTokens.buttonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -115,12 +159,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.75rem; ${buttonTokens.buttonRadius}: 1rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.5rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -136,12 +180,12 @@ export const config = { ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 0.875rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyL.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -157,12 +201,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyM.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -178,12 +222,12 @@ export const config = { ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1.375rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -199,12 +243,12 @@ export const config = { ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 1rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -220,12 +264,12 @@ export const config = { ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: 0.375rem; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonTokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${buttonTokens.buttonSpinnerSize}: 0.75rem; ${buttonTokens.buttonSpinnerColor}: inherit; @@ -244,7 +288,7 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent); + ${buttonTokens.buttonFocusColor}: ${surfaceAccent}; `, }, stretching: { diff --git a/packages/sdds-serv/src/components/ButtonGroup/ButtonGroup.config.ts b/packages/sdds-serv/src/components/ButtonGroup/ButtonGroup.config.ts index 38cdcc186d3..ecc7ff832f3 100644 --- a/packages/sdds-serv/src/components/ButtonGroup/ButtonGroup.config.ts +++ b/packages/sdds-serv/src/components/ButtonGroup/ButtonGroup.config.ts @@ -1,3 +1,51 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextSecondary, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextSecondary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, buttonGroupTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,124 +56,124 @@ export const config = { variations: { view: { default: css` - ${buttonGroupTokens.buttonColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${inverseTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${inverseTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; `, accent: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceAccent}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-accent-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${buttonGroupTokens.buttonColorHover}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${buttonGroupTokens.buttonColor}: var(--text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonGroupTokens.buttonColor}: ${textPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${textPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${textPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${textSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceClear}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--text-primary-hover); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${buttonGroupTokens.buttonColorActive}: var(--text-primary-active); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${buttonGroupTokens.buttonColorHover}: ${textPrimaryHover}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${buttonGroupTokens.buttonColorActive}: ${textPrimaryActive}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceClear}; `, success: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfacePositive}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfacePositiveHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceWarning}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceWarningHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${surfaceNegative}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceTransparentDeepHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceTransparentDeepActive}; `, black: css` - ${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onDarkTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onLightSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onDarkTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; `, white: css` - ${buttonGroupTokens.buttonColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary); - ${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default); + ${buttonGroupTokens.buttonColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonTextColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonIconColor}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonValueColor}: ${onLightTextSecondary}; + ${buttonGroupTokens.buttonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor}); - ${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover); - ${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary); - ${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default-active); + ${buttonGroupTokens.buttonColorHover}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorHover}: ${onDarkSurfaceSolidDefaultHover}; + ${buttonGroupTokens.buttonColorActive}: ${onLightTextPrimary}; + ${buttonGroupTokens.buttonBackgroundColorActive}: ${onDarkSurfaceSolidDefaultActive}; `, }, size: { @@ -136,12 +184,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 4rem; ${buttonGroupTokens.buttonPadding}: 1.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, l: css` ${buttonGroupTokens.buttonDefaultRadius}: 0.875rem; @@ -150,12 +198,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3.5rem; ${buttonGroupTokens.buttonPadding}: 1.5rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyL.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyL.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyL.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyLBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyL.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyL.lineHeight}; `, m: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -165,12 +213,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 3rem; ${buttonGroupTokens.buttonPadding}: 1.25rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyM.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyM.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyM.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyMBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyM.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyM.lineHeight}; `, s: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.25rem; @@ -179,12 +227,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2.5rem; ${buttonGroupTokens.buttonPadding}: 1rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -193,12 +241,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 2rem; ${buttonGroupTokens.buttonPadding}: 0.75rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${buttonGroupTokens.buttonSegmentedRadius}: 0.125rem; @@ -207,12 +255,12 @@ export const config = { ${buttonGroupTokens.buttonHeight}: 1.5rem; ${buttonGroupTokens.buttonPadding}: 0.625rem; - ${buttonGroupTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${buttonGroupTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${buttonGroupTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${buttonGroupTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${buttonGroupTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${buttonGroupTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${buttonGroupTokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${buttonGroupTokens.buttonFontSize}: ${bodyXS.fontSize}; + ${buttonGroupTokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${buttonGroupTokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${buttonGroupTokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${buttonGroupTokens.buttonLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-serv/src/components/Calendar/Calendar.config.ts b/packages/sdds-serv/src/components/Calendar/Calendar.config.ts index fc0a15388db..da43596a01d 100644 --- a/packages/sdds-serv/src/components/Calendar/Calendar.config.ts +++ b/packages/sdds-serv/src/components/Calendar/Calendar.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, calendarBaseTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,38 +35,38 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarBaseTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarBaseTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarBaseTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarBaseTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarBaseTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; + ${calendarBaseTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarBaseTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarBaseTokens.calendarHeaderArrowColor}: ${calendarBaseTokens.calendarContentPrimaryColor}; - ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: ${textSecondary}; ${calendarBaseTokens.calendarDisabledOpacity}: 0.4; - ${calendarBaseTokens.iconButtonColor}: var(--text-primary); - ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarBaseTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarBaseTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarBaseTokens.tooltipColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonColor}: ${textPrimary}; + ${calendarBaseTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarBaseTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarBaseTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarBaseTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarBaseTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarBaseTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -51,46 +77,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -100,13 +126,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 4rem; ${calendarBaseTokens.iconButtonWidth}: 4rem; @@ -120,46 +146,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -169,13 +195,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3.5rem; ${calendarBaseTokens.iconButtonWidth}: 3.5rem; @@ -189,46 +215,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -238,13 +264,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 3rem; ${calendarBaseTokens.iconButtonWidth}: 3rem; @@ -258,46 +284,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -307,13 +333,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2.5rem; ${calendarBaseTokens.iconButtonWidth}: 2.5rem; @@ -327,46 +353,46 @@ export const config = { ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarBaseTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarBaseTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -376,13 +402,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; @@ -400,12 +426,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2.5rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.625rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.375rem; @@ -414,7 +440,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarBaseTokens.tooltipArrowHeight}: 0.5rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarBaseTokens.tooltipPaddingTop}: 0.5rem; @@ -425,12 +451,12 @@ export const config = { ${calendarBaseTokens.tooltipMinHeight}: 2rem; ${calendarBaseTokens.tooltipBorderRadius}: 0.5rem; - ${calendarBaseTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarBaseTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarBaseTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarBaseTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarBaseTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarBaseTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarBaseTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarBaseTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarBaseTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarBaseTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarBaseTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarBaseTokens.tooltipContentLeftMargin}: 0.25rem; @@ -439,7 +465,7 @@ export const config = { ${calendarBaseTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarBaseTokens.tooltipArrowHeight}: 0.375rem; ${calendarBaseTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarBaseTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarBaseTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-serv/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-serv/src/components/Calendar/CalendarDouble.config.ts index 70c9a8be880..23f5b901cfe 100644 --- a/packages/sdds-serv/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-serv/src/components/Calendar/CalendarDouble.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + surfaceAccent, + surfaceClear, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + textPrimary, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, calendarDoubleTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,39 +35,39 @@ export const config = { variations: { view: { default: css` - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); - ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${calendarDoubleTokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarHoveredItemColor}: ${textPrimary}; + ${calendarDoubleTokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${calendarDoubleTokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${calendarDoubleTokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${calendarDoubleTokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${calendarDoubleTokens.calendarHeaderArrowColor}: ${calendarDoubleTokens.calendarContentPrimaryColor}; - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); - ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${calendarDoubleTokens.calendarContentSecondaryColor}: ${textSecondary}; + ${calendarDoubleTokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${calendarDoubleTokens.calendarDisabledOpacity}: 0.4; - ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); - ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); - ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); - - ${calendarDoubleTokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${calendarDoubleTokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${calendarDoubleTokens.tooltipColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonColor}: ${textPrimary}; + ${calendarDoubleTokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorHover}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonColorActive}: ${textPrimaryHover}; + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${calendarDoubleTokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${calendarDoubleTokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${calendarDoubleTokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${calendarDoubleTokens.tooltipColor}: ${textPrimary}; `, }, size: { @@ -52,46 +78,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.875rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -101,13 +127,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 4rem; ${calendarDoubleTokens.iconButtonWidth}: 4rem; @@ -121,46 +147,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -170,13 +196,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; @@ -190,46 +216,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -239,13 +265,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 3rem; ${calendarDoubleTokens.iconButtonWidth}: 3rem; @@ -259,46 +285,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -308,13 +334,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; @@ -328,46 +354,46 @@ export const config = { ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; - ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${calendarDoubleTokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${calendarDoubleTokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +403,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; @@ -401,12 +427,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2.5rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.625rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.375rem; @@ -415,7 +441,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${calendarDoubleTokens.tooltipArrowHeight}: 0.5rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${calendarDoubleTokens.tooltipPaddingTop}: 0.5rem; @@ -426,12 +452,12 @@ export const config = { ${calendarDoubleTokens.tooltipMinHeight}: 2rem; ${calendarDoubleTokens.tooltipBorderRadius}: 0.5rem; - ${calendarDoubleTokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${calendarDoubleTokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${calendarDoubleTokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${calendarDoubleTokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${calendarDoubleTokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${calendarDoubleTokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${calendarDoubleTokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${calendarDoubleTokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${calendarDoubleTokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${calendarDoubleTokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${calendarDoubleTokens.tooltipContentLeftMargin}: 0.25rem; @@ -440,7 +466,7 @@ export const config = { ${calendarDoubleTokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${calendarDoubleTokens.tooltipArrowHeight}: 0.375rem; ${calendarDoubleTokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${calendarDoubleTokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${calendarDoubleTokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, }, diff --git a/packages/sdds-serv/src/components/Card/Card.config.ts b/packages/sdds-serv/src/components/Card/Card.config.ts index 2899613fb13..4b0decd0086 100644 --- a/packages/sdds-serv/src/components/Card/Card.config.ts +++ b/packages/sdds-serv/src/components/Card/Card.config.ts @@ -1,3 +1,4 @@ +import { surfaceSolidCard } from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, cardTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,7 +9,7 @@ export const config = { variations: { view: { default: css` - ${tokens.solidBackground}: var(--surface-solid-card); + ${tokens.solidBackground}: ${surfaceSolidCard}; `, }, size: { diff --git a/packages/sdds-serv/src/components/Carousel/Carousel.config.ts b/packages/sdds-serv/src/components/Carousel/Carousel.config.ts index f3fd82e4491..7450532849a 100644 --- a/packages/sdds-serv/src/components/Carousel/Carousel.config.ts +++ b/packages/sdds-serv/src/components/Carousel/Carousel.config.ts @@ -1,3 +1,11 @@ +import { + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, carouselNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +16,14 @@ export const config = { variations: { view: { default: css` - ${tokens.paginationDotBackground}: var(--surface-transparent-tertiary); - ${tokens.paginationDotActiveBackground}: var(--surface-solid-default); - ${tokens.controlIconButtonColor}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.controlIconButtonColorHover}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.controlIconButtonColorActive}: var(--text-primary); - ${tokens.controlIconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.paginationDotBackground}: ${surfaceTransparentTertiary}; + ${tokens.paginationDotActiveBackground}: ${surfaceSolidDefault}; + ${tokens.controlIconButtonColor}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.controlIconButtonColorHover}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.controlIconButtonColorActive}: ${textPrimary}; + ${tokens.controlIconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, }, size: { diff --git a/packages/sdds-serv/src/components/Cell/Cell.config.ts b/packages/sdds-serv/src/components/Cell/Cell.config.ts index 6588088c11f..dce052decd4 100644 --- a/packages/sdds-serv/src/components/Cell/Cell.config.ts +++ b/packages/sdds-serv/src/components/Cell/Cell.config.ts @@ -1,13 +1,14 @@ +import { bodyL, bodyM, bodyS, bodyXS, textPrimary, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, cellTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { variations: { view: { default: css` - ${cellTokens.cellColor}: var(--text-primary); - ${cellTokens.cellLabelColor}: var(--text-secondary); - ${cellTokens.cellTitleColor}: var(--text-primary); - ${cellTokens.cellSubtitleColor}: var(--text-secondary); + ${cellTokens.cellColor}: ${textPrimary}; + ${cellTokens.cellLabelColor}: ${textSecondary}; + ${cellTokens.cellTitleColor}: ${textPrimary}; + ${cellTokens.cellSubtitleColor}: ${textSecondary}; ${cellTokens.cellBackgroundColor}: transparent; `, }, @@ -23,26 +24,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyM.lineHeight}; `, m: css` ${cellTokens.cellWidth}: 15rem; @@ -55,26 +56,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.5rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyS.lineHeight}; `, s: css` ${cellTokens.cellWidth}: 15rem; @@ -87,26 +88,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${cellTokens.cellWidth}: 15rem; @@ -119,26 +120,26 @@ export const config = { ${cellTokens.cellTextboxGap}: 0.125rem; ${cellTokens.cellGap}: 0.375rem; - ${cellTokens.cellLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellLabelLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${cellTokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${cellTokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${cellTokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${cellTokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${cellTokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${cellTokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${cellTokens.cellLabelFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellLabelFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellLabelFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellLabelFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellLabelLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${cellTokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${cellTokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${cellTokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${cellTokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${cellTokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${cellTokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-serv/src/components/Checkbox/Checkbox.config.ts b/packages/sdds-serv/src/components/Checkbox/Checkbox.config.ts index 53d71aca8ad..36972bf261e 100644 --- a/packages/sdds-serv/src/components/Checkbox/Checkbox.config.ts +++ b/packages/sdds-serv/src/components/Checkbox/Checkbox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, checkboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -17,18 +33,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0; ${checkboxTokens.contentLeftOffset}: 0.5rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${checkboxTokens.margin}: 0; @@ -39,18 +55,18 @@ export const config = { ${checkboxTokens.contentTopOffset}: 0.125rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${checkboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${checkboxTokens.margin}: 0; @@ -60,91 +76,91 @@ export const config = { ${checkboxTokens.triggerBorderWidth}: 0.125rem; ${checkboxTokens.contentTopOffset}: 0.0625rem; ${checkboxTokens.contentLeftOffset}: 0.75rem; - ${checkboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${checkboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${checkboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${checkboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${checkboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${checkboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${checkboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${checkboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${checkboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${checkboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${checkboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${checkboxTokens.labelLineHeight}: ${bodyL.lineHeight}; ${checkboxTokens.descriptionMarginTop}: 0.125rem; - ${checkboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${checkboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${checkboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${checkboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${checkboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${checkboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${checkboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${checkboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${checkboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${checkboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${checkboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${checkboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, view: { accent: css` - ${checkboxTokens.fillColor}: var(--text-accent); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.labelColor}: var(--text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textAccent}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.labelColor}: ${textPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${checkboxTokens.fillColor}: var(--text-primary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPrimary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${checkboxTokens.fillColor}: var(--text-secondary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textSecondary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${checkboxTokens.fillColor}: var(--text-tertiary); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textTertiary}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${checkboxTokens.fillColor}: var(--text-paragraph); - ${checkboxTokens.iconColor}: var(--inverse-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textParagraph}; + ${checkboxTokens.iconColor}: ${inverseTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${checkboxTokens.fillColor}: var(--text-positive); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textPositive}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${checkboxTokens.fillColor}: var(--text-warning); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textWarning}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-secondary); + ${checkboxTokens.triggerBorderColor}: ${textSecondary}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, negative: css` - ${checkboxTokens.fillColor}: var(--text-negative); - ${checkboxTokens.iconColor}: var(--on-dark-text-primary); - ${checkboxTokens.descriptionColor}: var(--text-secondary); + ${checkboxTokens.fillColor}: ${textNegative}; + ${checkboxTokens.iconColor}: ${onDarkTextPrimary}; + ${checkboxTokens.descriptionColor}: ${textSecondary}; ${checkboxTokens.triggerBackgroundColor}: transparent; - ${checkboxTokens.triggerBorderColor}: var(--text-negative); + ${checkboxTokens.triggerBorderColor}: ${textNegative}; ${checkboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -155,7 +171,7 @@ export const config = { }, focused: { true: css` - ${checkboxTokens.focusColor}: var(--text-accent); + ${checkboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-serv/src/components/ChipGroup/ChipGroup.config.ts b/packages/sdds-serv/src/components/ChipGroup/ChipGroup.config.ts index 2bed06ad8c0..13f6f01ecb9 100644 --- a/packages/sdds-serv/src/components/ChipGroup/ChipGroup.config.ts +++ b/packages/sdds-serv/src/components/ChipGroup/ChipGroup.config.ts @@ -1,3 +1,21 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, chipGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,28 +26,28 @@ export const config = { variations: { view: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; `, }, size: { @@ -39,12 +57,12 @@ export const config = { ${tokens.chipHeight}: 3rem; ${tokens.chipPadding}: 0 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.5rem; @@ -60,12 +78,12 @@ export const config = { ${tokens.chipHeight}: 2.5rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.375rem; @@ -81,12 +99,12 @@ export const config = { ${tokens.chipHeight}: 2rem; ${tokens.chipPadding}: 0 0.875rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; @@ -102,12 +120,12 @@ export const config = { ${tokens.chipHeight}: 1.5rem; ${tokens.chipPadding}: 0 0.625rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.chipLeftContentMarginLeft}: -0.125rem; ${tokens.chipLeftContentMarginRight}: 0.25rem; diff --git a/packages/sdds-serv/src/components/CodeField/CodeField.config.ts b/packages/sdds-serv/src/components/CodeField/CodeField.config.ts index d0109404d66..4822e68ea7f 100644 --- a/packages/sdds-serv/src/components/CodeField/CodeField.config.ts +++ b/packages/sdds-serv/src/components/CodeField/CodeField.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodyXS, + outlineAccent, + surfaceAccent, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textNegative, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, codeFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,19 +26,19 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--surface-accent); + ${tokens.caretColor}: ${surfaceAccent}; - ${tokens.captionColor}: var(--text-secondary); - ${tokens.captionColorError}: var(--text-negative); + ${tokens.captionColor}: ${textSecondary}; + ${tokens.captionColorError}: ${textNegative}; - ${tokens.codeColor}: var(--text-primary); - ${tokens.codeColorError}: var(--text-negative); - ${tokens.borderColorFocus}: var(--outline-accent); + ${tokens.codeColor}: ${textPrimary}; + ${tokens.codeColorError}: ${textNegative}; + ${tokens.borderColorFocus}: ${outlineAccent}; - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; `, }, size: { @@ -34,19 +51,19 @@ export const config = { ${tokens.codeItemWidth}: 2.75rem; ${tokens.codeItemHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.captionFontFamily}: ${bodyS.fontFamily}; + ${tokens.captionFontSize}: ${bodyS.fontSize}; + ${tokens.captionFontStyle}: ${bodyS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyS.lineHeight}; ${tokens.borderRadius}: 0.875rem; ${tokens.borderRadiusSegmented}: 0.375rem; @@ -61,19 +78,19 @@ export const config = { ${tokens.codeItemWidth}: 2.375rem; ${tokens.codeItemHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.captionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.captionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.captionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.captionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.captionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.captionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.captionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.captionFontSize}: ${bodyXS.fontSize}; + ${tokens.captionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.captionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.captionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.captionLineHeight}: ${bodyXS.lineHeight}; ${tokens.borderRadius}: 0.75rem; ${tokens.borderRadiusSegmented}: 0.25rem; diff --git a/packages/sdds-serv/src/components/Combobox/Combobox.config.ts b/packages/sdds-serv/src/components/Combobox/Combobox.config.ts index 9b023838c5d..d72231a52a4 100644 --- a/packages/sdds-serv/src/components/Combobox/Combobox.config.ts +++ b/packages/sdds-serv/src/components/Combobox/Combobox.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkTextPrimary, + shadowDownHardM, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, comboboxNewTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,221 +40,221 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-positive); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-positive); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-positive); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textPositive}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textPositive}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textPositive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-warning); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-warning); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-warning); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textWarning}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textWarning}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textWarning}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldClearColor}: var(--text-negative); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColor}: var(--text-negative); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipColorActive}: var(--text-primary); - ${tokens.textFieldChipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldClearColor}: ${textNegative}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColor}: ${textNegative}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipColorActive}: ${textPrimary}; + ${tokens.textFieldChipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 0.72; - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -243,20 +274,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -264,12 +295,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -292,12 +323,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.emptyStatePadding}: 1rem; ${tokens.padding}: 0.125rem; @@ -319,19 +350,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -364,20 +395,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -385,12 +416,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -413,12 +444,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.emptyStatePadding}: 0.875rem 1rem 0.875rem 1rem; ${tokens.padding}: 0.125rem; @@ -440,19 +471,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -485,20 +516,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -506,12 +537,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -534,12 +565,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.emptyStatePadding}: 0.625rem 0.875rem 0.625rem 0.875rem; ${tokens.padding}: 0.125rem; @@ -561,19 +592,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -606,20 +637,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -627,12 +658,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -655,12 +686,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.emptyStatePadding}: 0.5rem 0.625rem 0.5rem 0.625rem; ${tokens.padding}: 0.125rem; @@ -682,19 +713,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -714,22 +745,22 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -742,12 +773,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -766,12 +797,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -789,13 +820,13 @@ export const config = { }, readOnly: { true: css` - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldReadOnlyOpacity}: 0.1; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-serv/src/components/Counter/Counter.config.ts b/packages/sdds-serv/src/components/Counter/Counter.config.ts index 140aa43a57f..bf0c13fd131 100644 --- a/packages/sdds-serv/src/components/Counter/Counter.config.ts +++ b/packages/sdds-serv/src/components/Counter/Counter.config.ts @@ -1,3 +1,18 @@ +import { + bodyS, + bodyXS, + bodyXXS, + inverseTextPrimary, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onLightSurfaceSolidDefault, + onLightTextPrimary, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, counterTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,32 +23,32 @@ export const config = { variations: { view: { default: css` - ${counterTokens.color}: var(--inverse-text-primary); - ${counterTokens.background}: var(--surface-solid-default); + ${counterTokens.color}: ${inverseTextPrimary}; + ${counterTokens.background}: ${surfaceSolidDefault}; `, accent: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-accent); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceAccent}; `, positive: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-positive); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfacePositive}; `, warning: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-warning); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceWarning}; `, negative: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--surface-negative); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${surfaceNegative}; `, dark: css` - ${counterTokens.color}: var(--on-dark-text-primary); - ${counterTokens.background}: var(--on-light-surface-solid-default); + ${counterTokens.color}: ${onDarkTextPrimary}; + ${counterTokens.background}: ${onLightSurfaceSolidDefault}; `, light: css` - ${counterTokens.color}: var(--on-light-text-primary); - ${counterTokens.background}: var(--on-dark-surface-solid-default); + ${counterTokens.color}: ${onLightTextPrimary}; + ${counterTokens.background}: ${onDarkSurfaceSolidDefault}; `, }, size: { @@ -41,56 +56,56 @@ export const config = { ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.75rem; ${counterTokens.padding}: 0 0.625rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${counterTokens.fontFamily}: ${bodyS.fontFamily}; + ${counterTokens.fontSize}: ${bodyS.fontSize}; + ${counterTokens.fontStyle}: ${bodyS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.5rem; ${counterTokens.padding}: 0 0.5rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${counterTokens.fontFamily}: ${bodyXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1.25rem; ${counterTokens.padding}: 0 0.375rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 1rem; ${counterTokens.padding}: 0 0.25rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, xxs: css` ${counterTokens.borderRadius}: 1rem; ${counterTokens.height}: 0.75rem; ${counterTokens.padding}: 0 0.125rem; - ${counterTokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${counterTokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${counterTokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${counterTokens.fontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${counterTokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${counterTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${counterTokens.fontFamily}: ${bodyXXS.fontFamily}; + ${counterTokens.fontSize}: ${bodyXXS.fontSize}; + ${counterTokens.fontStyle}: ${bodyXXS.fontStyle}; + ${counterTokens.fontWeight}: ${bodyXXS.fontWeight}; + ${counterTokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${counterTokens.lineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-serv/src/components/DatePicker/DatePicker.clear.config.ts b/packages/sdds-serv/src/components/DatePicker/DatePicker.clear.config.ts index c2e334a638a..c6ba9f0cf18 100644 --- a/packages/sdds-serv/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/sdds-serv/src/components/DatePicker/DatePicker.clear.config.ts @@ -1,3 +1,46 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,64 +51,64 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); + ${tokens.outlineFocusColor}: ${surfaceAccent}; ${tokens.background}: transparent; ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - ${tokens.focusColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + ${tokens.focusColor}: ${textAccent}; ${tokens.textFieldBackgroundColor}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -74,76 +117,76 @@ export const config = { ${tokens.textFieldBackgroundSuccessColor}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -152,12 +195,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -167,12 +210,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -198,30 +241,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}:0.82rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; @@ -239,46 +282,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -289,25 +332,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -318,12 +361,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -333,12 +376,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -369,30 +412,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -410,46 +453,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -460,25 +503,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -489,12 +532,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -504,12 +547,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -540,30 +583,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -581,46 +624,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -631,25 +674,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -660,12 +703,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -675,12 +718,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -711,30 +754,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -752,46 +795,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -802,25 +845,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -831,12 +874,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -846,12 +889,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -882,30 +925,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -923,46 +966,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -973,25 +1016,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -1008,12 +1051,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -1022,7 +1065,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -1033,12 +1076,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1047,15 +1090,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1068,12 +1111,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1092,12 +1135,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1116,15 +1159,15 @@ export const config = { readOnly: { true: css` ${tokens.backgroundReadOnly}: transparent; - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-serv/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-serv/src/components/DatePicker/DatePicker.config.ts index aba695d13e2..6109f4466df 100644 --- a/packages/sdds-serv/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-serv/src/components/DatePicker/DatePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardM, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,110 +51,110 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -121,12 +163,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -136,12 +178,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.indicatorSizeInner}: 0.5rem; @@ -165,30 +207,30 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.813rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -206,46 +248,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -256,25 +298,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 1rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -285,12 +327,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -300,12 +342,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; ${tokens.labelWrapperOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -335,30 +377,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -376,46 +418,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -426,25 +468,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; ${tokens.iconButtonRadius}: 0.875rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -455,12 +497,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -470,12 +512,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; ${tokens.labelWrapperOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -505,30 +547,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -546,46 +588,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -596,25 +638,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; ${tokens.iconButtonRadius}: 0.75rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -625,12 +667,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -640,12 +682,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -675,30 +717,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -716,46 +758,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -766,25 +808,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.625rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -795,12 +837,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -810,12 +852,12 @@ export const config = { ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; ${tokens.labelWrapperOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -845,30 +887,30 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -886,46 +928,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -936,25 +978,25 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.5rem; ${tokens.iconButtonRadius}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -971,12 +1013,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -985,7 +1027,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -996,12 +1038,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1010,15 +1052,15 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -1031,12 +1073,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -1055,12 +1097,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -1078,16 +1120,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.dividerColorReadOnly}: var(--text-primary); + ${tokens.dividerColorReadOnly}: ${textPrimary}; ${tokens.dividerOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.rightContentOpacityReadOnly}: 0.4; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; diff --git a/packages/sdds-serv/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/sdds-serv/src/components/DateTimePicker/DateTimePicker.config.ts index 6ac3406a0e3..24bd26065b8 100644 --- a/packages/sdds-serv/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/sdds-serv/src/components/DateTimePicker/DateTimePicker.config.ts @@ -1,3 +1,45 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + inverseTextPrimary, + shadowDownHardS, + shadowDownSoftS, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { dateTimePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,91 +52,91 @@ export const config = { variations: { view: { default: css` - ${tokens.outlineFocusColor}: var(--surface-accent); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.popoverShadow}: var(--shadow-down-soft-s); - ${tokens.popoverSeparatorBackground}: var(--surface-transparent-secondary); - ${tokens.popoverBackgroundColor}: var(--surface-solid-card); - - ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); - ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); - ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.outlineFocusColor}: ${surfaceAccent}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.popoverShadow}: ${shadowDownSoftS}; + ${tokens.popoverSeparatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.popoverBackgroundColor}: ${surfaceSolidCard}; + + ${tokens.calendarSelectedItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarSelectedItemColor}: ${inverseTextPrimary}; + ${tokens.calendarSelectableItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarCurrentItemBorderColor}: ${surfaceSolidDefault}; ${tokens.calendarCurrentItemBackgroundHover}: transparent; - ${tokens.calendarCurrentItemColorHover}: var(--text-primary); - ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); - ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); - ${tokens.calendarHoveredItemBackground}: var(--surface-accent); - ${tokens.calendarHoveredItemColor}: var(--text-primary); - ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); - ${tokens.calendarOutlineFocusColor}: var(--surface-accent); - ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); - ${tokens.calendarContentPrimaryDisabledColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemColorHover}: ${textPrimary}; + ${tokens.calendarCurrentItemChildBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.calendarActiveItemBackground}: ${surfaceSolidDefault}; + ${tokens.calendarActiveItemColor}: ${inverseTextPrimary}; + ${tokens.calendarHoveredItemBackground}: ${surfaceAccent}; + ${tokens.calendarHoveredItemColor}: ${textPrimary}; + ${tokens.calendarRangeBackground}: ${surfaceTransparentSecondary}; + ${tokens.calendarOutlineFocusColor}: ${surfaceAccent}; + ${tokens.calendarContentPrimaryColor}: ${surfaceSolidDefault}; + ${tokens.calendarContentPrimaryDisabledColor}: ${surfaceSolidDefault}; ${tokens.calendarHeaderArrowColor}: ${tokens.calendarContentPrimaryColor}; - ${tokens.calendarContentSecondaryColor}: var(--text-secondary); - ${tokens.calendarContentSecondaryDisabledColor}: var(--text-secondary); + ${tokens.calendarContentSecondaryColor}: ${textSecondary}; + ${tokens.calendarContentSecondaryDisabledColor}: ${textSecondary}; ${tokens.calendarDisabledOpacity}: 0.4; - ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-clear); - ${tokens.iconButtonColorHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${tokens.iconButtonColorActive}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); - ${tokens.iconButtonFocusColor}: var(--surface-accent); - - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-s); - ${tokens.tooltipColor}: var(--text-primary); - - ${tokens.timePickerItemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.timePickerItemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.timePickerScrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.timePickerScrollbarTrackColor}: var(--surface-transparent-primary); - - ${tokens.shortcutColor}: var(--text-primary); - ${tokens.shortcutBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarSeparatorBackground}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceClear}; + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceClear}; + ${tokens.iconButtonColorActive}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceClear}; + ${tokens.iconButtonFocusColor}: ${surfaceAccent}; + + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardS}; + ${tokens.tooltipColor}: ${textPrimary}; + + ${tokens.timePickerItemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.timePickerItemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.timePickerScrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.timePickerScrollbarTrackColor}: ${surfaceTransparentPrimary}; + + ${tokens.shortcutColor}: ${textPrimary}; + ${tokens.shortcutBackgroundHover}: ${surfaceTransparentSecondary}; `, }, size: { @@ -113,30 +155,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -146,12 +188,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -168,46 +210,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.875rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.875rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.875rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.875rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -218,13 +260,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 4rem; ${tokens.iconButtonWidth}: 4rem; @@ -237,21 +279,21 @@ export const config = { ${tokens.timePickerItemHeight}: 4rem; ${tokens.timePickerItemBorderRadius}: 0.875rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.313rem 0.875rem; ${tokens.shortcutGap}: 0.375rem; @@ -272,30 +314,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -305,12 +347,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -327,46 +369,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.75rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyL.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyL.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyL.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.75rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyL.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyL.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyL.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyL.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyL.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyLBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -377,13 +419,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 1rem; ${tokens.calendarHeaderDateGap}: 0.5rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h3.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h3.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h3.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h3.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h3.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h3.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h3Bold.fontWeight}; ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; @@ -396,21 +438,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3.5rem; ${tokens.timePickerItemBorderRadius}: 0.75rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyL.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyL.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyL.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyL.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyL.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.shortcutFontFamily}: ${bodyL.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyL.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyL.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyL.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyL.lineHeight}; ${tokens.shortcutPadding}: 1.063rem 0.75rem; ${tokens.shortcutGap}: 0.375rem; @@ -431,30 +473,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +506,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -486,46 +528,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.625rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyM.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyM.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyM.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.625rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyM.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyM.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyM.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyM.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyM.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyMBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -536,13 +578,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.75rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; @@ -555,21 +597,21 @@ export const config = { ${tokens.timePickerItemHeight}: 3rem; ${tokens.timePickerItemBorderRadius}: 0.625rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyM.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyM.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyM.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyM.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyM.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.shortcutFontFamily}: ${bodyM.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyM.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyM.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyM.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyM.lineHeight}; ${tokens.shortcutPadding}: 0.875rem 0.625rem; ${tokens.shortcutGap}: 0.375rem; @@ -590,30 +632,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -623,12 +665,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.25rem -0.625rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -645,46 +687,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.5rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.5rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodySBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -695,13 +737,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; @@ -714,21 +756,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2.5rem; ${tokens.timePickerItemBorderRadius}: 0.5rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.shortcutFontFamily}: ${bodyS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyS.lineHeight}; ${tokens.shortcutPadding}: 0.688rem 0.5rem; ${tokens.shortcutGap}: 0.375rem; @@ -749,30 +791,30 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -782,12 +824,12 @@ export const config = { ${tokens.indicatorOuterPlacementRight}: 0.125rem -0.6875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -804,46 +846,46 @@ export const config = { ${tokens.calendarYearsPadding}: 0.5rem 0 0 0; ${tokens.calendarYearItemBorderRadius}: 0.5rem; - ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarYearFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarYearFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarYearFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarYearFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarYearFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarYearFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarYearSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarMonthsPadding}: 0.5rem 0 0 0; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; - ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarMonthFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarMonthFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarMonthFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarMonthFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarMonthFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarMonthFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarMonthSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarQuartersPadding}: 0.375rem 0 0 0; ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; - ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuarterFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarQuarterFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarQuarterFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarQuarterFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarQuarterFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarQuarterFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarQuarterSelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarDaysPadding}: 0.375rem 0 0 0; ${tokens.calendarDayItemBorderRadius}: 0.5rem; - ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarDayFontFamily}: ${bodyXS.fontFamily}; + ${tokens.calendarDayFontSize}: ${bodyXS.fontSize}; + ${tokens.calendarDayFontStyle}: ${bodyXS.fontStyle}; + ${tokens.calendarDayFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.calendarDayFontLineHeight}: ${bodyXS.lineHeight}; + ${tokens.calendarDayFontWeight}: ${bodyXS.fontWeight}; + ${tokens.calendarDaySelectedFontWeight}: ${bodyXSBold.fontWeight}; ${tokens.calendarCurrentItemBorderWidth}: 0.063rem; @@ -854,13 +896,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); - ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); - ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); - ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; @@ -873,21 +915,21 @@ export const config = { ${tokens.timePickerItemHeight}: 2rem; ${tokens.timePickerItemBorderRadius}: 0.375rem; ${tokens.timePickerItemPadding}: 0; - ${tokens.timePickerItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.timePickerItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.timePickerItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.timePickerItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.timePickerItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.timePickerItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.timePickerItemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.timePickerItemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.timePickerItemFontSize}: ${bodyXS.fontSize}; + ${tokens.timePickerItemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.timePickerItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.timePickerItemLineHeight}: ${bodyXS.lineHeight}; ${tokens.timePickerScrollbarWidth}: 0.125rem; ${tokens.timePickerScrollbarMargin}: 0.5rem; - ${tokens.shortcutFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.shortcutFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.shortcutFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.shortcutFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.shortcutLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.shortcutLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.shortcutFontFamily}: ${bodyXS.fontFamily}; + ${tokens.shortcutFontStyle}: ${bodyXS.fontStyle}; + ${tokens.shortcutFontSize}: ${bodyXS.fontSize}; + ${tokens.shortcutFontWeight}: ${bodyXS.fontWeight}; + ${tokens.shortcutLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.shortcutLineHeight}: ${bodyXS.lineHeight}; ${tokens.shortcutPadding}: 0.563rem 0.375rem; ${tokens.shortcutGap}: 0.375rem; @@ -962,12 +1004,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -976,7 +1018,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tokens.tooltipArrowHeight}: 0.5rem; ${tokens.tooltipArrowEdgeMargin}: 0.625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, s: css` ${tokens.tooltipPaddingTop}: 0.5rem; @@ -987,12 +1029,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -1001,7 +1043,7 @@ export const config = { ${tokens.tooltipArrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tokens.tooltipArrowHeight}: 0.375rem; ${tokens.tooltipArrowEdgeMargin}: 0.5625rem; - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, disabled: { @@ -1011,12 +1053,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-serv/src/components/Divider/Divider.config.ts b/packages/sdds-serv/src/components/Divider/Divider.config.ts index df0449d5c06..0b7cd3030de 100644 --- a/packages/sdds-serv/src/components/Divider/Divider.config.ts +++ b/packages/sdds-serv/src/components/Divider/Divider.config.ts @@ -1,3 +1,9 @@ +import { + inverseTextTertiary, + onDarkSurfaceTransparentTertiary, + onLightSurfaceTransparentTertiary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,17 +15,17 @@ export const config = { variations: { view: { default: css` - ${dividerTokens.background}: var(--surface-transparent-tertiary); + ${dividerTokens.background}: ${surfaceTransparentTertiary}; `, dark: css` - ${dividerTokens.background}: var(--on-dark-surface-transparent-tertiary); + ${dividerTokens.background}: ${onDarkSurfaceTransparentTertiary}; `, light: css` - ${dividerTokens.background}: var(--on-light-surface-transparent-tertiary); + ${dividerTokens.background}: ${onLightSurfaceTransparentTertiary}; `, // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится inverse: css` - ${dividerTokens.background}: var(--inverse-text-tertiary); + ${dividerTokens.background}: ${inverseTextTertiary}; `, }, size: { diff --git a/packages/sdds-serv/src/components/Drawer/Drawer.config.ts b/packages/sdds-serv/src/components/Drawer/Drawer.config.ts index b0b00b15040..b2e308a2382 100644 --- a/packages/sdds-serv/src/components/Drawer/Drawer.config.ts +++ b/packages/sdds-serv/src/components/Drawer/Drawer.config.ts @@ -1,3 +1,9 @@ +import { + overlayBlur, + overlaySoft, + surfaceSolidCard, + surfaceTransparentPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, drawerTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +14,11 @@ export const config = { variations: { view: { default: css` - ${drawerTokens.background}: var(--surface-solid-card); + ${drawerTokens.background}: ${surfaceSolidCard}; ${drawerTokens.shadow}: 0 3.75rem 7rem -0.5rem rgba(0, 0, 0, 0.08); - ${drawerTokens.contentBackgroundColor}: var(--surface-transparent-primary); - ${drawerTokens.drawerOverlayWithBlurColor}: var(--overlay-blur); - ${drawerTokens.drawerOverlayColor}: var(--overlay-soft); + ${drawerTokens.contentBackgroundColor}: ${surfaceTransparentPrimary}; + ${drawerTokens.drawerOverlayWithBlurColor}: ${overlayBlur}; + ${drawerTokens.drawerOverlayColor}: ${overlaySoft}; `, }, size: { diff --git a/packages/sdds-serv/src/components/Dropdown/Dropdown.config.ts b/packages/sdds-serv/src/components/Dropdown/Dropdown.config.ts index f14dd28fbd7..b48a7723cec 100644 --- a/packages/sdds-serv/src/components/Dropdown/Dropdown.config.ts +++ b/packages/sdds-serv/src/components/Dropdown/Dropdown.config.ts @@ -1,3 +1,11 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceTransparentSecondary, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, dropdownTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -24,12 +32,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.5rem; ${tokens.dividerMarginBottomTight}: 0.5rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -37,12 +45,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.padding}: 0.125rem; @@ -61,12 +69,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyL.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyL.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -74,12 +82,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.padding}: 0.125rem; @@ -98,12 +106,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.375rem; ${tokens.dividerMarginBottomTight}: 0.375rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyM.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyM.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -111,12 +119,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 0.125rem; @@ -135,12 +143,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.25rem; ${tokens.dividerMarginBottomTight}: 0.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -148,12 +156,12 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.padding}: 0.125rem; @@ -172,12 +180,12 @@ export const config = { ${tokens.dividerMarginTopTight}: 0.125rem; ${tokens.dividerMarginBottomTight}: 0.125rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeightBold}: ${bodyXS.fontWeight}; + ${tokens.itemFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.cellPadding}: 0rem; ${tokens.cellPaddingLeftContent}: 0rem; @@ -185,18 +193,18 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; `, }, view: { default: css` - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, }, diff --git a/packages/sdds-serv/src/components/Dropzone/Dropzone.config.ts b/packages/sdds-serv/src/components/Dropzone/Dropzone.config.ts index 8e02e0f7407..f973db9c843 100644 --- a/packages/sdds-serv/src/components/Dropzone/Dropzone.config.ts +++ b/packages/sdds-serv/src/components/Dropzone/Dropzone.config.ts @@ -1,3 +1,16 @@ +import { + bodyS, + h4, + h4Bold, + outlineAccent, + outlineSolidSecondary, + outlineSolidSecondaryHover, + overlaySoft, + surfaceSolidCard, + surfaceSolidCardHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, dropzoneTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +21,14 @@ export const config = { variations: { view: { default: css` - ${dropzoneTokens.background}: var(--surface-solid-card); - ${dropzoneTokens.backgroundHover}: var(--surface-solid-card-hover); - ${dropzoneTokens.overlayColorActive}: var(--overlay-soft); - ${dropzoneTokens.borderColor}: var(--outline-solid-secondary); - ${dropzoneTokens.borderColorHover}: var(--outline-solid-secondary-hover); - ${dropzoneTokens.borderColorActive}: var(--outline-accent); - ${dropzoneTokens.titleColor}: var(--text-primary); - ${dropzoneTokens.descriptionColor}: var(--text-secondary); + ${dropzoneTokens.background}: ${surfaceSolidCard}; + ${dropzoneTokens.backgroundHover}: ${surfaceSolidCardHover}; + ${dropzoneTokens.overlayColorActive}: ${overlaySoft}; + ${dropzoneTokens.borderColor}: ${outlineSolidSecondary}; + ${dropzoneTokens.borderColorHover}: ${outlineSolidSecondaryHover}; + ${dropzoneTokens.borderColorActive}: ${outlineAccent}; + ${dropzoneTokens.titleColor}: ${textPrimary}; + ${dropzoneTokens.descriptionColor}: ${textSecondary}; `, }, size: { @@ -26,19 +39,19 @@ export const config = { ${dropzoneTokens.contentGap}: 0.375rem; ${dropzoneTokens.contentColumnGap}: 0.5rem; - ${dropzoneTokens.titleFontFamily}: var(--plasma-typo-h4-font-family); - ${dropzoneTokens.titleFontSize}: var(--plasma-typo-h4-font-size); - ${dropzoneTokens.titleFontStyle}: var(--plasma-typo-h4-font-style); - ${dropzoneTokens.titleFontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${dropzoneTokens.titleLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${dropzoneTokens.titleLineHeight}: var(--plasma-typo-h4-line-height); + ${dropzoneTokens.titleFontFamily}: ${h4.fontFamily}; + ${dropzoneTokens.titleFontSize}: ${h4.fontSize}; + ${dropzoneTokens.titleFontStyle}: ${h4.fontStyle}; + ${dropzoneTokens.titleFontWeight}: ${h4Bold.fontWeight}; + ${dropzoneTokens.titleLetterSpacing}: ${h4.letterSpacing}; + ${dropzoneTokens.titleLineHeight}: ${h4.lineHeight}; - ${dropzoneTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${dropzoneTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${dropzoneTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${dropzoneTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${dropzoneTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${dropzoneTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${dropzoneTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${dropzoneTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${dropzoneTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${dropzoneTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${dropzoneTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${dropzoneTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-serv/src/components/EmbedIconButton/EmbedIconButton.config.ts b/packages/sdds-serv/src/components/EmbedIconButton/EmbedIconButton.config.ts index 8c049af5ce7..995c4ff1f56 100644 --- a/packages/sdds-serv/src/components/EmbedIconButton/EmbedIconButton.config.ts +++ b/packages/sdds-serv/src/components/EmbedIconButton/EmbedIconButton.config.ts @@ -1,3 +1,34 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textInfo, + textInfoActive, + textInfoHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, embedIconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,53 +40,53 @@ export const config = { variations: { view: { default: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-primary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPrimary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-primary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPrimaryActive}; `, accent: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-accent); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textAccent}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-accent-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-accent-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textAccentHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textAccentActive}; `, secondary: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-secondary); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textSecondary}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-secondary-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-secondary-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textSecondaryHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textSecondaryActive}; `, positive: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-positive); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textPositive}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-positive-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-positive-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textPositiveHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textPositiveActive}; `, warning: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-warning); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textWarning}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-warning-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-warning-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textWarningHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textWarningActive}; `, negative: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-negative); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textNegative}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-negative-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-negative-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textNegativeHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textNegativeActive}; `, info: css` - ${embedIconButtonTokens.embedIconButtonColor}: var(--text-info); - ${embedIconButtonTokens.embedIconButtonBackgroundColor}: var(--surface-transparent-clear); + ${embedIconButtonTokens.embedIconButtonColor}: ${textInfo}; + ${embedIconButtonTokens.embedIconButtonBackgroundColor}: ${surfaceClear}; ${embedIconButtonTokens.embedIconButtonLoadingBackgroundColor}: var(${embedIconButtonTokens.embedIconButtonBackgroundColor}); - ${embedIconButtonTokens.embedIconButtonColorHover}: var(--text-info-hover); - ${embedIconButtonTokens.embedIconButtonColorActive}: var(--text-info-active); + ${embedIconButtonTokens.embedIconButtonColorHover}: ${textInfoHover}; + ${embedIconButtonTokens.embedIconButtonColorActive}: ${textInfoActive}; `, }, size: { @@ -64,12 +95,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 2.25rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.75rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyL.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyL.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyL.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyL.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -79,12 +110,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1.5rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.625rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyM.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyM.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyM.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyM.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 1.25rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -94,12 +125,12 @@ export const config = { ${embedIconButtonTokens.embedIconButtonWidth}: 1rem; ${embedIconButtonTokens.embedIconButtonPadding}: 0rem; ${embedIconButtonTokens.embedIconButtonRadius}: 0.5rem; - ${embedIconButtonTokens.embedIconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${embedIconButtonTokens.embedIconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${embedIconButtonTokens.embedIconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${embedIconButtonTokens.embedIconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${embedIconButtonTokens.embedIconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${embedIconButtonTokens.embedIconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${embedIconButtonTokens.embedIconButtonFontFamily}: ${bodyS.fontFamily}; + ${embedIconButtonTokens.embedIconButtonFontSize}: ${bodyS.fontSize}; + ${embedIconButtonTokens.embedIconButtonFontStyle}: ${bodyS.fontStyle}; + ${embedIconButtonTokens.embedIconButtonFontWeight}: ${bodySBold.fontWeight}; + ${embedIconButtonTokens.embedIconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${embedIconButtonTokens.embedIconButtonLineHeight}: ${bodyS.lineHeight}; ${embedIconButtonTokens.embedIconButtonSpinnerSize}: 0.75rem; ${embedIconButtonTokens.embedIconButtonSpinnerColor}: inherit; @@ -112,7 +143,7 @@ export const config = { }, focused: { true: css` - ${embedIconButtonTokens.embedIconButtonFocusColor}: var(--surface-accent); + ${embedIconButtonTokens.embedIconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-serv/src/components/EmptyState/EmptyState.config.ts b/packages/sdds-serv/src/components/EmptyState/EmptyState.config.ts index 406c7041d27..71eb1cefbaa 100644 --- a/packages/sdds-serv/src/components/EmptyState/EmptyState.config.ts +++ b/packages/sdds-serv/src/components/EmptyState/EmptyState.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -13,12 +14,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 1rem 0; ${tokens.buttonMargin}: -1rem 0 0 0; ${tokens.buttonHeight}: 3.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.borderRadius}: 0.75rem; @@ -27,12 +28,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.875rem 0; ${tokens.buttonMargin}: -0.875rem 0 0 0; ${tokens.buttonHeight}: 3rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.borderRadius}: 0.625rem; @@ -41,12 +42,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.625rem 0; ${tokens.buttonMargin}: -0.625rem 0 0 0; ${tokens.buttonHeight}: 2.5rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.borderRadius}: 0.5rem; @@ -55,12 +56,12 @@ export const config = { ${tokens.descriptionMargin}: 0 0 0.5rem 0; ${tokens.buttonMargin}: -0.5rem 0 0 0; ${tokens.buttonHeight}: 2rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-serv/src/components/File/File.config.ts b/packages/sdds-serv/src/components/File/File.config.ts index 455a87f891b..d3782b80aeb 100644 --- a/packages/sdds-serv/src/components/File/File.config.ts +++ b/packages/sdds-serv/src/components/File/File.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceNegative, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, fileTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +24,36 @@ export const config = { variations: { view: { default: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-secondary); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textSecondary}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-solid-default); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceSolidDefault}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-solid-default); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; `, negative: css` - ${tokens.embedIconButtonColor}: var(--text-primary); - ${tokens.embedIconButtonColorHover}: var(--text-primary-hover); - ${tokens.embedIconButtonColorActive}: var(--text-primary-active); - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); + ${tokens.embedIconButtonColor}: ${textPrimary}; + ${tokens.embedIconButtonColorHover}: ${textPrimaryHover}; + ${tokens.embedIconButtonColorActive}: ${textPrimaryActive}; + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; - ${tokens.cellTitleColor}: var(--text-primary); - ${tokens.cellSubtitleColor}: var(--text-negative); + ${tokens.cellTitleColor}: ${textPrimary}; + ${tokens.cellSubtitleColor}: ${textNegative}; - ${tokens.progressBarCircularContentColor}: var(--text-primary); - ${tokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${tokens.progressBarCircularStroke}: var(--surface-negative); + ${tokens.progressBarCircularContentColor}: ${textPrimary}; + ${tokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${tokens.progressBarCircularStroke}: ${surfaceNegative}; - ${tokens.progressTrackBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.progressFilledBackgroundColor}: var(--surface-negative); + ${tokens.progressTrackBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.progressFilledBackgroundColor}: ${surfaceNegative}; `, }, size: { @@ -52,19 +68,19 @@ export const config = { ${tokens.cellGap}: 0.75rem; ${tokens.cellPaddingRightContent}: 0.75rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -94,19 +110,19 @@ export const config = { ${tokens.cellGap}: 0.625rem; ${tokens.cellPaddingRightContent}: 0.625rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -136,19 +152,19 @@ export const config = { ${tokens.cellGap}: 0.5rem; ${tokens.cellPaddingRightContent}: 0.5rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 36; ${tokens.progressBarCircularHeight}: 2.25rem; @@ -178,19 +194,19 @@ export const config = { ${tokens.cellGap}: 0.375rem; ${tokens.cellPaddingRightContent}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.cellSubtitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellSubtitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellSubtitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellSubtitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellSubtitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellSubtitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.cellSubtitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellSubtitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellSubtitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellSubtitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellSubtitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellSubtitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.progressBarCircularSize}: 24; ${tokens.progressBarCircularHeight}: 1.5rem; diff --git a/packages/sdds-serv/src/components/IconButton/IconButton.config.ts b/packages/sdds-serv/src/components/IconButton/IconButton.config.ts index 9d760c4f3f2..d7a4ad4f9c4 100644 --- a/packages/sdds-serv/src/components/IconButton/IconButton.config.ts +++ b/packages/sdds-serv/src/components/IconButton/IconButton.config.ts @@ -1,3 +1,43 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + onDarkSurfaceSolidDefault, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceTransparentDeep, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,74 +49,74 @@ export const config = { variations: { view: { default: css` - ${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${inverseTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${inverseTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${inverseTextPrimaryActive}; `, accent: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceAccent}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; `, secondary: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, clear: css` - ${iconButtonTokens.iconButtonColor}: var(--text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${iconButtonTokens.iconButtonColor}: ${textPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceClear}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; `, success: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfacePositive}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfacePositiveHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfacePositiveActive}; `, warning: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceWarning}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceWarningHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceWarningActive}; `, critical: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${surfaceNegative}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover); - ${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active); + ${iconButtonTokens.iconButtonBackgroundColorHover}: ${surfaceNegativeHover}; + ${iconButtonTokens.iconButtonBackgroundColorActive}: ${surfaceNegativeActive}; `, dark: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceTransparentDeep}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, black: css` - ${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onDarkTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onLightSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onDarkTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onDarkTextPrimaryActive}; `, white: css` - ${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary); - ${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default); + ${iconButtonTokens.iconButtonColor}: ${onLightTextPrimary}; + ${iconButtonTokens.iconButtonBackgroundColor}: ${onDarkSurfaceSolidDefault}; ${iconButtonTokens.iconButtonLoadingBackgroundColor}: var(${iconButtonTokens.iconButtonBackgroundColor}); - ${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary-hover); - ${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary-active); + ${iconButtonTokens.iconButtonColorHover}: ${onLightTextPrimaryHover}; + ${iconButtonTokens.iconButtonColorActive}: ${onLightTextPrimaryActive}; `, }, size: { @@ -85,12 +125,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 4rem; ${iconButtonTokens.iconButtonPadding}: 1.75rem; ${iconButtonTokens.iconButtonRadius}: 1rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.5rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -100,12 +140,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3.5rem; ${iconButtonTokens.iconButtonPadding}: 1.5rem; ${iconButtonTokens.iconButtonRadius}: 0.875rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -115,12 +155,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 3rem; ${iconButtonTokens.iconButtonPadding}: 1.25rem; ${iconButtonTokens.iconButtonRadius}: 0.75rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -130,12 +170,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2.5rem; ${iconButtonTokens.iconButtonPadding}: 1rem; ${iconButtonTokens.iconButtonRadius}: 0.625rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -145,12 +185,12 @@ export const config = { ${iconButtonTokens.iconButtonWidth}: 2rem; ${iconButtonTokens.iconButtonPadding}: 0.75rem; ${iconButtonTokens.iconButtonRadius}: 0.5rem; - ${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${iconButtonTokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${iconButtonTokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${iconButtonTokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${iconButtonTokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${iconButtonTokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${iconButtonTokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${iconButtonTokens.iconButtonSpinnerSize}: 1rem; ${iconButtonTokens.iconButtonSpinnerColor}: inherit; @@ -163,7 +203,7 @@ export const config = { }, focused: { true: css` - ${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent); + ${iconButtonTokens.iconButtonFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-serv/src/components/InformationWrapper/InformationWrapper.config.ts b/packages/sdds-serv/src/components/InformationWrapper/InformationWrapper.config.ts index 45b90809f49..ddebbdb449a 100644 --- a/packages/sdds-serv/src/components/InformationWrapper/InformationWrapper.config.ts +++ b/packages/sdds-serv/src/components/InformationWrapper/InformationWrapper.config.ts @@ -1,3 +1,18 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceNegative, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, informationWrapperTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,50 +23,50 @@ export const config = { variations: { view: { default: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { l: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.75rem; @@ -63,29 +78,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.938rem auto auto; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -95,12 +110,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, m: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.625rem; @@ -112,29 +127,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.813rem auto auto; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -144,12 +159,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, s: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.5rem; @@ -161,29 +176,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.438rem -2.688rem auto auto; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -193,12 +208,12 @@ export const config = { ${tokens.indicatorWithoutLabelInnerLeft}: auto auto -0.5rem 0; `, xs: css` - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorWrapperGap}: 0.25rem; ${tokens.labelWrapperOffset}: 0.375rem; @@ -210,29 +225,29 @@ export const config = { ${tokens.hintWithoutLabelPlacementOffset}: 0.188rem -2.063rem auto auto; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; - ${tokens.rightHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.rightHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.rightHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.rightHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.rightHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.rightHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.rightHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.rightHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.rightHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.rightHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.rightHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.rightHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -244,10 +259,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -260,12 +275,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -284,12 +299,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; diff --git a/packages/sdds-serv/src/components/LinkButton/LinkButton.config.ts b/packages/sdds-serv/src/components/LinkButton/LinkButton.config.ts index 65d6cd4557f..216133464e0 100644 --- a/packages/sdds-serv/src/components/LinkButton/LinkButton.config.ts +++ b/packages/sdds-serv/src/components/LinkButton/LinkButton.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + surfaceClear, + textAccent, + textAccentActive, + textAccentHover, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, linkButtonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +38,70 @@ export const config = { variations: { view: { default: css` - ${linkButtonTokens.linkButtonColor}: var(--text-primary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-primary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-primary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-primary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-primary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-primary-active); + ${linkButtonTokens.linkButtonColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonIconColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonTextColor}: ${textPrimary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPrimaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPrimaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPrimaryActive}; `, accent: css` - ${linkButtonTokens.linkButtonColor}: var(--text-accent); - ${linkButtonTokens.linkButtonIconColor}: var(--text-accent); - ${linkButtonTokens.linkButtonTextColor}: var(--text-accent); - ${linkButtonTokens.linkButtonBackgroundColor}: var(---surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-accent-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-accent-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-accent-active); + ${linkButtonTokens.linkButtonColor}: ${textAccent}; + ${linkButtonTokens.linkButtonIconColor}: ${textAccent}; + ${linkButtonTokens.linkButtonTextColor}: ${textAccent}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textAccentActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textAccentHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textAccentActive}; `, secondary: css` - ${linkButtonTokens.linkButtonColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonIconColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonTextColor}: var(--text-secondary); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-secondary-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-secondary-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-secondary-active); + ${linkButtonTokens.linkButtonColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonIconColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonTextColor}: ${textSecondary}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textSecondaryActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textSecondaryHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textSecondaryActive}; `, positive: css` - ${linkButtonTokens.linkButtonColor}: var(--text-positive); - ${linkButtonTokens.linkButtonIconColor}: var(--text-positive); - ${linkButtonTokens.linkButtonTextColor}: var(--text-positive); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-positive-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-positive-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-positive-active); + ${linkButtonTokens.linkButtonColor}: ${textPositive}; + ${linkButtonTokens.linkButtonIconColor}: ${textPositive}; + ${linkButtonTokens.linkButtonTextColor}: ${textPositive}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textPositiveActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textPositiveHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textPositiveActive}; `, warning: css` - ${linkButtonTokens.linkButtonColor}: var(--text-warning); - ${linkButtonTokens.linkButtonIconColor}: var(--text-warning); - ${linkButtonTokens.linkButtonTextColor}: var(--text-warning); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-warning-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-warning-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-warning-active); + ${linkButtonTokens.linkButtonColor}: ${textWarning}; + ${linkButtonTokens.linkButtonIconColor}: ${textWarning}; + ${linkButtonTokens.linkButtonTextColor}: ${textWarning}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textWarningActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textWarningHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textWarningActive}; `, negative: css` - ${linkButtonTokens.linkButtonColor}: var(--text-negative); - ${linkButtonTokens.linkButtonIconColor}: var(--text-negative); - ${linkButtonTokens.linkButtonTextColor}: var(--text-negative); - ${linkButtonTokens.linkButtonBackgroundColor}: var(--surface-transparent-clear); - ${linkButtonTokens.linkButtonColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonColorActive}: var(--text-negative-active); - ${linkButtonTokens.linkButtonFocusColor}: var(--surface-accent); - ${linkButtonTokens.linkButtonTextColorHover}: var(--text-negative-hover); - ${linkButtonTokens.linkButtonTextColorActive}: var(--text-negative-active); + ${linkButtonTokens.linkButtonColor}: ${textNegative}; + ${linkButtonTokens.linkButtonIconColor}: ${textNegative}; + ${linkButtonTokens.linkButtonTextColor}: ${textNegative}; + ${linkButtonTokens.linkButtonBackgroundColor}: ${surfaceClear}; + ${linkButtonTokens.linkButtonColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonColorActive}: ${textNegativeActive}; + ${linkButtonTokens.linkButtonFocusColor}: ${surfaceAccent}; + ${linkButtonTokens.linkButtonTextColorHover}: ${textNegativeHover}; + ${linkButtonTokens.linkButtonTextColorActive}: ${textNegativeActive}; `, }, size: { @@ -79,12 +109,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 4rem; ${linkButtonTokens.linkButtonPadding}: 1.25rem 0; ${linkButtonTokens.linkButtonRadius}: 1rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.5rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -98,12 +128,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3.5rem; ${linkButtonTokens.linkButtonPadding}: 1rem 0; ${linkButtonTokens.linkButtonRadius}: 0.875rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyL.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyL.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyL.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyLBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyL.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -117,12 +147,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 3rem; ${linkButtonTokens.linkButtonPadding}: 0.75rem 0; ${linkButtonTokens.linkButtonRadius}: 0.75rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyM.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyM.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyM.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyMBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyM.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -136,12 +166,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2.5rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.625rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1.375rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -155,12 +185,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 2rem; ${linkButtonTokens.linkButtonPadding}: 0.5rem 0; ${linkButtonTokens.linkButtonRadius}: 0.5rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 1rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; @@ -174,12 +204,12 @@ export const config = { ${linkButtonTokens.linkButtonHeight}: 1.5rem; ${linkButtonTokens.linkButtonPadding}: 0.375rem 0; ${linkButtonTokens.linkButtonRadius}: 0.375rem; - ${linkButtonTokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${linkButtonTokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${linkButtonTokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${linkButtonTokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${linkButtonTokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${linkButtonTokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${linkButtonTokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${linkButtonTokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${linkButtonTokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${linkButtonTokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${linkButtonTokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${linkButtonTokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; ${linkButtonTokens.linkButtonSpinnerSize}: 0.75rem; ${linkButtonTokens.linkButtonSpinnerColor}: inherit; diff --git a/packages/sdds-serv/src/components/List/List.config.ts b/packages/sdds-serv/src/components/List/List.config.ts index b0a7acc37b0..1a6a8f57ca1 100644 --- a/packages/sdds-serv/src/components/List/List.config.ts +++ b/packages/sdds-serv/src/components/List/List.config.ts @@ -1,3 +1,12 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfaceAccent, + surfaceTransparentSecondary, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, listTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,13 +17,13 @@ export const config = { variations: { view: { default: css` - ${listTokens.listItemColor}: var(--text-primary); - ${listTokens.listItemColorHover}: var(--text-primary); + ${listTokens.listItemColor}: ${textPrimary}; + ${listTokens.listItemColorHover}: ${textPrimary}; ${listTokens.listItemBackground}: transparent; - ${listTokens.listItemBackgroundHover}: var(--surface-transparent-secondary); + ${listTokens.listItemBackgroundHover}: ${surfaceTransparentSecondary}; ${listTokens.listItemBorderColor}: transparent; ${listTokens.listItemBorderColorHover}: transparent; - ${listTokens.listItemFocusColor}: var(--surface-accent); + ${listTokens.listItemFocusColor}: ${surfaceAccent}; ${listTokens.listDisabledOpacity}: 0.4; `, }, @@ -29,12 +38,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-xs-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${listTokens.listItemFontFamily}: ${bodyXS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyXS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyXS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyXS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyXS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${listTokens.listItemPaddingTop}: 0.689rem; @@ -46,12 +55,12 @@ export const config = { ${listTokens.listItemGap}: 0.375rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-s-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-s-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-s-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-s-line-height); + ${listTokens.listItemFontFamily}: ${bodyS.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyS.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyS.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyS.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyS.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyS.lineHeight}; `, m: css` ${listTokens.listItemPaddingTop}: 0.75rem; @@ -63,12 +72,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-m-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-m-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-m-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-m-line-height); + ${listTokens.listItemFontFamily}: ${bodyM.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyM.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyM.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyM.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyM.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyM.lineHeight}; `, l: css` ${listTokens.listItemPaddingTop}: 1rem; @@ -80,12 +89,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, xl: css` ${listTokens.listItemPaddingTop}: 1.3125rem; @@ -97,12 +106,12 @@ export const config = { ${listTokens.listItemGap}: 0.5rem; ${listTokens.listItemTightDifference}: 0.25rem; - ${listTokens.listItemFontFamily}: var(--plasma-typo-body-l-font-family); - ${listTokens.listItemFontSize}: var(--plasma-typo-body-l-font-size); - ${listTokens.listItemFontStyle}: var(--plasma-typo-body-l-font-style); - ${listTokens.listItemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${listTokens.listItemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${listTokens.listItemLineHeight}: var(--plasma-typo-body-l-line-height); + ${listTokens.listItemFontFamily}: ${bodyL.fontFamily}; + ${listTokens.listItemFontSize}: ${bodyL.fontSize}; + ${listTokens.listItemFontStyle}: ${bodyL.fontStyle}; + ${listTokens.listItemFontWeight}: ${bodyL.fontWeight}; + ${listTokens.listItemLetterSpacing}: ${bodyL.letterSpacing}; + ${listTokens.listItemLineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-serv/src/components/Loader/Loader.config.ts b/packages/sdds-serv/src/components/Loader/Loader.config.ts index 25fef650be1..587a5bcb58c 100644 --- a/packages/sdds-serv/src/components/Loader/Loader.config.ts +++ b/packages/sdds-serv/src/components/Loader/Loader.config.ts @@ -1,3 +1,30 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + overlaySoft, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, loaderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,67 +35,67 @@ export const config = { variations: { view: { default: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-solid-default); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceSolidDefault}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-primary); + ${loaderTokens.spinnerColor}: ${textPrimary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, secondary: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-transparent-secondary); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceTransparentSecondary}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-secondary); + ${loaderTokens.spinnerColor}: ${textSecondary}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, accent: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-accent); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceAccent}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-accent); + ${loaderTokens.spinnerColor}: ${textAccent}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, positive: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-positive); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfacePositive}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-positive); + ${loaderTokens.spinnerColor}: ${textPositive}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, warning: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-warning); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceWarning}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-warning); + ${loaderTokens.spinnerColor}: ${textWarning}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, negative: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-negative); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceNegative}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-negative); + ${loaderTokens.spinnerColor}: ${textNegative}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, info: css` - ${loaderTokens.progressBarCircularBackgroundStroke}: var(--surface-transparent-tertiary); - ${loaderTokens.progressBarCircularStroke}: var(--surface-info); - ${loaderTokens.progressBarCircularContentColor}: var(--text-primary); + ${loaderTokens.progressBarCircularBackgroundStroke}: ${surfaceTransparentTertiary}; + ${loaderTokens.progressBarCircularStroke}: ${surfaceInfo}; + ${loaderTokens.progressBarCircularContentColor}: ${textPrimary}; - ${loaderTokens.spinnerColor}: var(--text-info); + ${loaderTokens.spinnerColor}: ${textInfo}; - ${loaderTokens.overlayColor}: var(--overlay-soft); + ${loaderTokens.overlayColor}: ${overlaySoft}; `, }, size: { @@ -81,12 +108,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 8rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h2-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h2-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h2-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h2-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h2.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h2.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h2.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h2Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h2.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h2.lineHeight}; ${loaderTokens.spinnerSize}: 8rem; `, @@ -99,12 +126,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 5.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-h5-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-h5-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-h5-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-h5-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${h5.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h5.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h5.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h5Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h5.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h5.lineHeight}; ${loaderTokens.spinnerSize}: 5.5rem; `, @@ -117,12 +144,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-l-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-l-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-l-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-l-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyL.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyL.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyL.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyL.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyL.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyL.lineHeight}; ${loaderTokens.spinnerSize}: 3.5rem; `, @@ -135,12 +162,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 3rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-m-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-m-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-m-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-m-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyM.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyM.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyM.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyM.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyM.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyM.lineHeight}; ${loaderTokens.spinnerSize}: 3rem; `, @@ -153,12 +180,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 2.25rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-s-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-s-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-s-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-s-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyS.lineHeight}; ${loaderTokens.spinnerSize}: 2.25rem; `, @@ -171,12 +198,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXS.lineHeight}; ${loaderTokens.spinnerSize}: 1.5rem; `, @@ -189,12 +216,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 1rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.125rem; ${loaderTokens.progressBarCircularStrokeSize}: 2; - ${loaderTokens.progressBarCircularContentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${loaderTokens.progressBarCircularContentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${loaderTokens.progressBarCircularContentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${loaderTokens.progressBarCircularContentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${loaderTokens.progressBarCircularContentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${loaderTokens.progressBarCircularContentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${loaderTokens.progressBarCircularContentFontFamily}: ${bodyXXS.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${bodyXXS.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${bodyXXS.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${bodyXXS.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${bodyXXS.lineHeight}; ${loaderTokens.spinnerSize}: 1rem; `, diff --git a/packages/sdds-serv/src/components/Modal/Modal.config.ts b/packages/sdds-serv/src/components/Modal/Modal.config.ts index 8b107b98ea3..63477a32b61 100644 --- a/packages/sdds-serv/src/components/Modal/Modal.config.ts +++ b/packages/sdds-serv/src/components/Modal/Modal.config.ts @@ -1,3 +1,11 @@ +import { + overlaySoft, + surfaceAccent, + surfaceSolidCard, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, modalTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,16 +16,16 @@ export const config = { view: { default: css` ${modalTokens.modalOverlayWithBlurColor}: rgba(35, 35, 35, 0.2); - ${modalTokens.modalOverlayColor}: var(--overlay-soft); - ${modalTokens.modalBodyBackground}: var(--surface-solid-card); + ${modalTokens.modalOverlayColor}: ${overlaySoft}; + ${modalTokens.modalBodyBackground}: ${surfaceSolidCard}; ${modalTokens.modalBodyBorderRadius}: 1.25rem; ${modalTokens.modalBodyPadding}: 2rem; ${modalTokens.modalContentPadding}: 0.625rem; ${modalTokens.modalCloseButtonRadius}: 0.375rem; - ${modalTokens.modalCloseButtonColor}: var(--text-secondary); - ${modalTokens.modalCloseButtonHoverColor}: var(--text-secondary-hover); - ${modalTokens.modalCloseButtonActiveColor}: var(--text-secondary-active); - ${modalTokens.modalOutlineFocusColor}: var(--surface-accent); + ${modalTokens.modalCloseButtonColor}: ${textSecondary}; + ${modalTokens.modalCloseButtonHoverColor}: ${textSecondaryHover}; + ${modalTokens.modalCloseButtonActiveColor}: ${textSecondaryActive}; + ${modalTokens.modalOutlineFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-serv/src/components/Note/Note.config.ts b/packages/sdds-serv/src/components/Note/Note.config.ts index 76e6e79ff13..8650d8fd6f5 100644 --- a/packages/sdds-serv/src/components/Note/Note.config.ts +++ b/packages/sdds-serv/src/components/Note/Note.config.ts @@ -1,3 +1,25 @@ +import { + surfaceTransparentInfo, + surfaceTransparentNegative, + surfaceTransparentPositive, + surfaceTransparentSecondary, + surfaceTransparentWarning, + textInfo, + textL, + textLBold, + textM, + textMBold, + textNegative, + textPositive, + textPrimary, + textS, + textSBold, + textSecondary, + textSecondaryHover, + textWarning, + textXS, + textXSBold, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,29 +30,29 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-secondary); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-primary); + ${tokens.background}: ${surfaceTransparentSecondary}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPrimary}; `, positive: css` - ${tokens.background}: var(--surface-transparent-positive); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-positive); + ${tokens.background}: ${surfaceTransparentPositive}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textPositive}; `, warning: css` - ${tokens.background}: var(--surface-transparent-warning); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-warning); + ${tokens.background}: ${surfaceTransparentWarning}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textWarning}; `, negative: css` - ${tokens.background}: var(--surface-transparent-negative); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-negative); + ${tokens.background}: ${surfaceTransparentNegative}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textNegative}; `, info: css` - ${tokens.background}: var(--surface-transparent-info); - ${tokens.color}: var(--text-primary); - ${tokens.contentBeforeColor}: var(--text-info); + ${tokens.background}: ${surfaceTransparentInfo}; + ${tokens.color}: ${textPrimary}; + ${tokens.contentBeforeColor}: ${textInfo}; `, }, size: { @@ -44,8 +66,8 @@ export const config = { ${tokens.closeIconTop}: 1rem; ${tokens.closeIconRight}: 1rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -53,20 +75,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 2rem; ${tokens.fixedContentBeforePadding}: 0.25rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-l-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.titleFontFamily}: ${textL.fontFamily}; + ${tokens.titleFontSize}: ${textL.fontSize}; + ${tokens.titleFontStyle}: ${textL.fontStyle}; + ${tokens.titleFontWeight}: ${textLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textL.letterSpacing}; + ${tokens.titleLineHeight}: ${textL.lineHeight}; ${tokens.titlePaddingRight}: 1.875rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-l-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-l-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-l-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-l-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-l-line-height); + ${tokens.textFontFamily}: ${textL.fontFamily}; + ${tokens.textFontSize}: ${textL.fontSize}; + ${tokens.textFontStyle}: ${textL.fontStyle}; + ${tokens.textFontWeight}: ${textL.fontWeight}; + ${tokens.textLetterSpacing}: ${textL.letterSpacing}; + ${tokens.textLineHeight}: ${textL.lineHeight}; `, m: css` ${tokens.padding}: 1.25rem 1.5rem; @@ -78,8 +100,8 @@ export const config = { ${tokens.closeIconTop}: 0.75rem; ${tokens.closeIconRight}: 0.75rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -87,20 +109,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-m-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.titleFontFamily}: ${textM.fontFamily}; + ${tokens.titleFontSize}: ${textM.fontSize}; + ${tokens.titleFontStyle}: ${textM.fontStyle}; + ${tokens.titleFontWeight}: ${textMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; + ${tokens.titleLineHeight}: ${textM.lineHeight}; ${tokens.titlePaddingRight}: 1.75rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-m-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-m-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-m-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-m-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-m-line-height); + ${tokens.textFontFamily}: ${textM.fontFamily}; + ${tokens.textFontSize}: ${textM.fontSize}; + ${tokens.textFontStyle}: ${textM.fontStyle}; + ${tokens.textFontWeight}: ${textM.fontWeight}; + ${tokens.textLetterSpacing}: ${textM.letterSpacing}; + ${tokens.textLineHeight}: ${textM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -112,8 +134,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1.5rem; ${tokens.closeIconButtonSize}: 1.5rem; @@ -121,20 +143,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-s-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.titleFontFamily}: ${textS.fontFamily}; + ${tokens.titleFontSize}: ${textS.fontSize}; + ${tokens.titleFontStyle}: ${textS.fontStyle}; + ${tokens.titleFontWeight}: ${textSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; + ${tokens.titleLineHeight}: ${textS.lineHeight}; ${tokens.titlePaddingRight}: 1.625rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-s-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-s-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-s-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-s-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-s-line-height); + ${tokens.textFontFamily}: ${textS.fontFamily}; + ${tokens.textFontSize}: ${textS.fontSize}; + ${tokens.textFontStyle}: ${textS.fontStyle}; + ${tokens.textFontWeight}: ${textS.fontWeight}; + ${tokens.textLetterSpacing}: ${textS.letterSpacing}; + ${tokens.textLineHeight}: ${textS.lineHeight}; `, xs: css` ${tokens.padding}: 0.75rem 1rem; @@ -146,8 +168,8 @@ export const config = { ${tokens.closeIconTop}: 0.625rem; ${tokens.closeIconRight}: 0.625rem; - ${tokens.closeIconColor}: var(--text-secondary); - ${tokens.closeIconColorOnHover}: var(--text-secondary-hover); + ${tokens.closeIconColor}: ${textSecondary}; + ${tokens.closeIconColorOnHover}: ${textSecondaryHover}; ${tokens.closeIconSize}: 1rem; ${tokens.closeIconButtonSize}: 1rem; @@ -155,20 +177,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-text-xs-bold-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.titleFontFamily}: ${textXS.fontFamily}; + ${tokens.titleFontSize}: ${textXS.fontSize}; + ${tokens.titleFontStyle}: ${textXS.fontStyle}; + ${tokens.titleFontWeight}: ${textXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.titleLineHeight}: ${textXS.lineHeight}; ${tokens.titlePaddingRight}: 1.5rem; - ${tokens.textFontFamily}: var(--plasma-typo-text-xs-font-family); - ${tokens.textFontSize}: var(--plasma-typo-text-xs-font-size); - ${tokens.textFontStyle}: var(--plasma-typo-text-xs-font-style); - ${tokens.textFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${tokens.textLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${tokens.textLineHeight}: var(--plasma-typo-text-xs-line-height); + ${tokens.textFontFamily}: ${textXS.fontFamily}; + ${tokens.textFontSize}: ${textXS.fontSize}; + ${tokens.textFontStyle}: ${textXS.fontStyle}; + ${tokens.textFontWeight}: ${textXS.fontWeight}; + ${tokens.textLetterSpacing}: ${textXS.letterSpacing}; + ${tokens.textLineHeight}: ${textXS.lineHeight}; `, }, }, diff --git a/packages/sdds-serv/src/components/Notification/Notification.config.ts b/packages/sdds-serv/src/components/Notification/Notification.config.ts index 3963e77e1e2..3b118730e09 100644 --- a/packages/sdds-serv/src/components/Notification/Notification.config.ts +++ b/packages/sdds-serv/src/components/Notification/Notification.config.ts @@ -1,3 +1,15 @@ +import { + bodyS, + bodySBold, + surfaceTransparentCard, + textInfo, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, notificationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,10 +20,10 @@ export const config = { variations: { view: { default: css` - ${notificationTokens.titleColor}: var(--text-primary); - ${notificationTokens.contentLeftIconColor}: var(--text-primary); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPrimary}; + ${notificationTokens.contentLeftIconColor}: ${textPrimary}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -40,32 +52,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, negative: css` - ${notificationTokens.titleColor}: var(--text-negative); - ${notificationTokens.contentLeftIconColor}: var(--text-negative); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textNegative}; + ${notificationTokens.contentLeftIconColor}: ${textNegative}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -94,32 +106,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, positive: css` - ${notificationTokens.titleColor}: var(--text-positive); - ${notificationTokens.contentLeftIconColor}: var(--text-positive); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textPositive}; + ${notificationTokens.contentLeftIconColor}: ${textPositive}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -148,32 +160,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, warning: css` - ${notificationTokens.titleColor}: var(--text-warning); - ${notificationTokens.contentLeftIconColor}: var(--text-warning); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textWarning}; + ${notificationTokens.contentLeftIconColor}: ${textWarning}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -202,32 +214,32 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; ${notificationTokens.paddingOneLineTextbox}: 0.8125rem 0.5rem 0.8125rem 0.875rem; `, info: css` - ${notificationTokens.titleColor}: var(--text-info); - ${notificationTokens.contentLeftIconColor}: var(--text-info); - ${notificationTokens.contentColor}: var(--text-secondary); - ${notificationTokens.background}: var(--surface-transparent-card); + ${notificationTokens.titleColor}: ${textInfo}; + ${notificationTokens.contentLeftIconColor}: ${textInfo}; + ${notificationTokens.contentColor}: ${textSecondary}; + ${notificationTokens.background}: ${surfaceTransparentCard}; ${notificationTokens.borderRadius}: 0.75rem; ${notificationTokens.padding}: 0.375rem; @@ -256,22 +268,22 @@ export const config = { ${notificationTokens.contentLeftIconMargin}: 0.375rem; ${notificationTokens.contentTopIconMargin}: 0.5rem; - ${notificationTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${notificationTokens.contentFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.contentFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${notificationTokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${notificationTokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${notificationTokens.titleFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${notificationTokens.titleFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${notificationTokens.titleFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${notificationTokens.closeIconColor}: var(--text-tertiary); - ${notificationTokens.closeIconColorOnHover}: var(--text-primary); + ${notificationTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.contentFontSize}: ${bodyS.fontSize}; + ${notificationTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${notificationTokens.contentFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.contentFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.titleFontFamily}: ${bodyS.fontFamily}; + ${notificationTokens.titleFontSize}: ${bodyS.fontSize}; + ${notificationTokens.titleFontStyle}: ${bodyS.fontStyle}; + ${notificationTokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${notificationTokens.titleFontLetterSpacing}: ${bodyS.letterSpacing}; + ${notificationTokens.titleFontLineHeight}: ${bodyS.lineHeight}; + + ${notificationTokens.closeIconColor}: ${textTertiary}; + ${notificationTokens.closeIconColorOnHover}: ${textPrimary}; ${notificationTokens.horizontalLayoutGap}: 0.375rem; ${notificationTokens.horizontalLayoutLeftIconMargin}: 0.75rem; diff --git a/packages/sdds-serv/src/components/NumberInput/NumberInput.config.ts b/packages/sdds-serv/src/components/NumberInput/NumberInput.config.ts index e55e70fd713..fe36d0ff215 100644 --- a/packages/sdds-serv/src/components/NumberInput/NumberInput.config.ts +++ b/packages/sdds-serv/src/components/NumberInput/NumberInput.config.ts @@ -1,3 +1,40 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseSurfaceTransparentSecondary, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextTertiary, + onDarkSurfaceTransparentSecondary, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextTertiary, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textNegative, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, numberInputTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,26 +47,26 @@ export const config = { variations: { view: { default: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--inverse-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--inverse-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--inverse-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-solid-default); - - ${tokens.iconButtonColor}: var(--inverse-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-solid-default); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--inverse-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--inverse-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${inverseTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${inverseTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${inverseSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceSolidDefault}; + + ${tokens.iconButtonColor}: ${inverseTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${inverseTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${inverseTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceSolidDefaultActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -37,26 +74,26 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, secondary: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-transparent-secondary); - - ${tokens.iconButtonColor}: var(--text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.iconButtonColorHover}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.iconButtonColorActive}: var(--text-primary); - ${tokens.iconButtonColorSolidActive}: var(--text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceTransparentSecondary}; + + ${tokens.iconButtonColor}: ${textPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.iconButtonColorHover}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.iconButtonColorActive}: ${textPrimary}; + ${tokens.iconButtonColorSolidActive}: ${textPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -64,27 +101,27 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, accent: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--inverse-text-primary); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--on-dark-text-primary); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--on-dark-text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--on-dark-surface-transparent-secondary); - ${tokens.backgroundColorSolid}: var(--surface-accent); - - ${tokens.iconButtonColor}: var(--on-dark-text-primary); - ${tokens.iconButtonBackgroundColor}: var(--surface-accent); - ${tokens.iconButtonColorHover}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidHover}: var(--on-dark-text-primary-hover); - ${tokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.iconButtonColorActive}: var(--inverse-text-primary); - ${tokens.iconButtonColorSolidActive}: var(--on-dark-text-primary-active); - ${tokens.iconButtonBackgroundColorActive}: var(--surface-accent-active); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${inverseTextPrimary}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${onDarkTextPrimary}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${onDarkTextTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${onDarkSurfaceTransparentSecondary}; + ${tokens.backgroundColorSolid}: ${surfaceAccent}; + + ${tokens.iconButtonColor}: ${onDarkTextPrimary}; + ${tokens.iconButtonBackgroundColor}: ${surfaceAccent}; + ${tokens.iconButtonColorHover}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidHover}: ${onDarkTextPrimaryHover}; + ${tokens.iconButtonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.iconButtonColorActive}: ${inverseTextPrimary}; + ${tokens.iconButtonColorSolidActive}: ${onDarkTextPrimaryActive}; + ${tokens.iconButtonBackgroundColorActive}: ${surfaceAccentActive}; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -92,25 +129,25 @@ export const config = { ${tokens.loaderSpinnerColorSolid}: inherit; `, clear: css` - ${tokens.caretColor}: var(--text-accent); - ${tokens.caretColorSolid}: var(--text-accent); - ${tokens.errorColor}: var(--text-negative); - ${tokens.backgroundErrorColor}: var(--surface-transparent-negative); - - ${tokens.color}: var(--text-primary); - ${tokens.colorSolid}: var(--text-primary); - ${tokens.iconButtonColorSolidHover}: var(--text-primary-hover); - ${tokens.additionalTextColor}: var(--text-tertiary); - ${tokens.additionalTextColorSolid}: var(--text-tertiary); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.backgroundColorSolidFocus}: var(--surface-transparent-secondary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.caretColorSolid}: ${textAccent}; + ${tokens.errorColor}: ${textNegative}; + ${tokens.backgroundErrorColor}: ${surfaceTransparentNegative}; + + ${tokens.color}: ${textPrimary}; + ${tokens.colorSolid}: ${textPrimary}; + ${tokens.iconButtonColorSolidHover}: ${textPrimaryHover}; + ${tokens.additionalTextColor}: ${textTertiary}; + ${tokens.additionalTextColorSolid}: ${textTertiary}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.backgroundColorSolidFocus}: ${surfaceTransparentSecondary}; ${tokens.backgroundColorSolid}: transparent; - ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonColor}: ${textPrimary}; ${tokens.iconButtonBackgroundColor}: transparent; - ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonColorHover}: ${textPrimaryHover}; ${tokens.iconButtonBackgroundColorHover}: transparent; - ${tokens.iconButtonColorActive}: var(--text-primary-active); + ${tokens.iconButtonColorActive}: ${textPrimaryActive}; ${tokens.iconButtonBackgroundColorActive}: transparent; ${tokens.actionButtonDisabledOpacity}: 0.4; @@ -125,12 +162,12 @@ export const config = { ${tokens.iconButtonHeight}: 3.5rem; ${tokens.iconButtonWidth}: 3.5rem; ${tokens.iconButtonPadding}: 1.5rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.iconButtonFontFamily}: ${bodyL.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyL.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyL.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyL.lineHeight}; ${tokens.iconButtonRadius}: 0.875rem; ${tokens.iconButtonSegmentationRadius}: 0.375rem; @@ -140,12 +177,12 @@ export const config = { ${tokens.textWrapperHeight}: 3.5rem; ${tokens.textWrapperPadding}: 1.063rem 1.125rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -157,12 +194,12 @@ export const config = { ${tokens.iconButtonHeight}: 3rem; ${tokens.iconButtonWidth}: 3rem; ${tokens.iconButtonPadding}: 1.25rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.iconButtonFontFamily}: ${bodyM.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyM.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyM.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyM.lineHeight}; ${tokens.iconButtonRadius}: 0.75rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -172,12 +209,12 @@ export const config = { ${tokens.textWrapperHeight}: 3rem; ${tokens.textWrapperPadding}: 0.875rem 1rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -189,12 +226,12 @@ export const config = { ${tokens.iconButtonHeight}: 2.5rem; ${tokens.iconButtonWidth}: 2.5rem; ${tokens.iconButtonPadding}: 1rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.iconButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyS.lineHeight}; ${tokens.iconButtonRadius}: 0.625rem; ${tokens.iconButtonSegmentationRadius}: 0.25rem; @@ -204,12 +241,12 @@ export const config = { ${tokens.textWrapperHeight}: 2.5rem; ${tokens.textWrapperPadding}: 0.688rem 0.875rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -221,12 +258,12 @@ export const config = { ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; ${tokens.iconButtonPadding}: 0.75rem; - ${tokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.iconButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.iconButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.iconButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.iconButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.iconButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.iconButtonLineHeight}: ${bodyXS.lineHeight}; ${tokens.iconButtonRadius}: 0.5rem; ${tokens.iconButtonSegmentationRadius}: 0.125rem; @@ -236,12 +273,12 @@ export const config = { ${tokens.textWrapperHeight}: 2rem; ${tokens.textWrapperPadding}: 0.563rem 0.625rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.textBeforeMarginRight}: 0.25rem; ${tokens.textAfterMarginLeft}: 0.25rem; @@ -257,8 +294,8 @@ export const config = { }, inputBackgroundType: { fill: css` - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary); + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimary}; `, clear: css` ${tokens.backgroundColor}: transparent; diff --git a/packages/sdds-serv/src/components/Pagination/Pagination.config.ts b/packages/sdds-serv/src/components/Pagination/Pagination.config.ts index 5b9af725836..8d406d06a38 100644 --- a/packages/sdds-serv/src/components/Pagination/Pagination.config.ts +++ b/packages/sdds-serv/src/components/Pagination/Pagination.config.ts @@ -1,3 +1,33 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + surfaceAccent, + surfaceClear, + surfaceSolidCard, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceSolidSecondary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, paginationTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,129 +39,129 @@ export const config = { variations: { view: { default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${paginationTokens.buttonHoverColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultActive}; + ${paginationTokens.buttonActiveColor}: ${inverseTextPrimary}; + ${paginationTokens.buttonArrowColor}: ${inverseTextSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; ${paginationTokens.inputBorderColor}:transparent; ${paginationTokens.selectBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidSecondary}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, clear: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonColorHover}: var(--text-primary-hover); - ${paginationTokens.buttonColorActive}: var(--text-primary-active); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); - ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonArrowColor}: var(--text-secondary); - ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); + ${paginationTokens.buttonColor}: ${textPrimary}; + ${paginationTokens.buttonColorHover}: ${textPrimaryHover}; + ${paginationTokens.buttonColorActive}: ${textPrimaryActive}; + ${paginationTokens.buttonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${paginationTokens.buttonBackgroundColorActive}: ${surfaceClear}; + ${paginationTokens.buttonHoverColor}: ${textPrimary}; + ${paginationTokens.buttonActiveColor}: ${textPrimary}; + ${paginationTokens.buttonArrowColor}: ${textSecondary}; + ${paginationTokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${paginationTokens.buttonArrowColorActive}: ${textSecondaryHover}; ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.inputBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.selectBackgroundColor}: ${surfaceSolidCard}; ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.paginationHelperTextColor}: var(--text-secondary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); + ${paginationTokens.paginationColor}: ${textPrimary}; + ${paginationTokens.paginationHelperTextColor}: ${textSecondary}; + ${paginationTokens.buttonFocusColor}: ${surfaceAccent}; `, }, viewCurrentPage: { default: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${inverseTextPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceSolidDefault}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${inverseTextPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% + ${inverseTextPrimary}, + ${surfaceSolidDefault} 80% ); `, secondary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceTransparentSecondary}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 85% ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% + ${inverseTextPrimary}, + ${surfaceTransparentSecondary} 80% ); `, clear: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-clear); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.paginationCurrentButtonColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonBackgroundColor}: ${surfaceClear}; + ${paginationTokens.paginationCurrentButtonHoverColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 95%); + ${paginationTokens.paginationCurrentButtonActiveColor}: ${textPrimary}; + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, ${textPrimary}, ${surfaceClear} 90%); `, }, size: { l: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-l-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-l-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-l-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-l-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyL.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyL.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyL.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyLBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyL.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyL.lineHeight}; ${paginationTokens.buttonHeight}: 3.5rem; ${paginationTokens.buttonWidth}: 3rem; @@ -167,12 +197,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, m: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-m-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-m-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-m-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-m-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyM.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyM.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyM.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyMBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyM.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyM.lineHeight}; ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; @@ -208,12 +238,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, s: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-s-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-s-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-s-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-s-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodySBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyS.lineHeight}; ${paginationTokens.buttonHeight}: 2.5rem; ${paginationTokens.buttonWidth}: 2.5rem; @@ -249,12 +279,12 @@ export const config = { ${paginationTokens.paginationHelperTextGap}: 0.5rem 2.5rem; `, xs: css` - ${paginationTokens.paginationFontFamily}: var(--plasma-typo-body-xs-font-family); - ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-xs-font-size); - ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-xs-font-style); - ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-xs-line-height); + ${paginationTokens.paginationFontFamily}: ${bodyXS.fontFamily}; + ${paginationTokens.paginationFontSize}: ${bodyXS.fontSize}; + ${paginationTokens.paginationFontStyle}: ${bodyXS.fontStyle}; + ${paginationTokens.paginationFontWeight}: ${bodyXSBold.fontWeight}; + ${paginationTokens.paginationLetterSpacing}: ${bodyXS.letterSpacing}; + ${paginationTokens.paginationLineHeight}: ${bodyXS.lineHeight}; ${paginationTokens.buttonHeight}: 2rem; ${paginationTokens.paginationInputWidth}: 2.5rem; diff --git a/packages/sdds-serv/src/components/Popover/Popover.config.ts b/packages/sdds-serv/src/components/Popover/Popover.config.ts index 2f9acaf14e8..f646f695605 100644 --- a/packages/sdds-serv/src/components/Popover/Popover.config.ts +++ b/packages/sdds-serv/src/components/Popover/Popover.config.ts @@ -1,3 +1,4 @@ +import { shadowDownHardM, surfaceSolidTertiary } from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, popoverTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -7,14 +8,14 @@ export const config = { variations: { view: { default: css` - ${popoverTokens.boxShadow}: var(--shadow-down-hard-m); + ${popoverTokens.boxShadow}: ${shadowDownHardM}; ${popoverTokens.arrowMaskWidth}: 1rem; ${popoverTokens.arrowMaskHeight}: 1rem; ${popoverTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${popoverTokens.arrowHeight}: 0.375rem; ${popoverTokens.arrowEdgeMargin}: 0.5625rem; - ${popoverTokens.arrowBackground}: var(--surface-solid-tertiary); + ${popoverTokens.arrowBackground}: ${surfaceSolidTertiary}; `, }, }, diff --git a/packages/sdds-serv/src/components/Progress/Progress.config.ts b/packages/sdds-serv/src/components/Progress/Progress.config.ts index c81cf38a298..7977222486e 100644 --- a/packages/sdds-serv/src/components/Progress/Progress.config.ts +++ b/packages/sdds-serv/src/components/Progress/Progress.config.ts @@ -1,3 +1,15 @@ +import { + surfaceAccent, + surfaceAccentGradient, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentSecondary, + surfaceWarning, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, progressTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,44 +20,44 @@ export const config = { variations: { view: { default: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-default); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidDefault}; + ${progressTokens.valueColor}: ${textTertiary}; `, secondary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-solid-tertiary); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceSolidTertiary}; + ${progressTokens.valueColor}: ${textTertiary}; `, primary: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccent}; + ${progressTokens.valueColor}: ${textTertiary}; `, accent: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-accent-gradient); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceAccentGradient}; + ${progressTokens.valueColor}: ${textTertiary}; `, info: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-info); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceInfo}; + ${progressTokens.valueColor}: ${textTertiary}; `, success: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-positive); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfacePositive}; + ${progressTokens.valueColor}: ${textTertiary}; `, warning: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-warning); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceWarning}; + ${progressTokens.valueColor}: ${textTertiary}; `, error: css` - ${progressTokens.trackBackgroundColor}: var(--surface-transparent-secondary); - ${progressTokens.progressFilledBackgroundColor}: var(--surface-negative); - ${progressTokens.valueColor}: var(--text-tertiary); + ${progressTokens.trackBackgroundColor}: ${surfaceTransparentSecondary}; + ${progressTokens.progressFilledBackgroundColor}: ${surfaceNegative}; + ${progressTokens.valueColor}: ${textTertiary}; `, }, size: { diff --git a/packages/sdds-serv/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/sdds-serv/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index 6a6449f99a4..8ebd31cba60 100644 --- a/packages/sdds-serv/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/sdds-serv/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -1,3 +1,23 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + h2, + h2Bold, + h5, + h5Bold, + surfaceAccent, + surfaceInfo, + surfaceNegative, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceWarning, + textPrimary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, progressBarCircularTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,39 +28,39 @@ export const config = { variations: { view: { default: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-solid-default); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceSolidDefault}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, secondary: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-transparent-secondary); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceTransparentSecondary}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, accent: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-accent); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceAccent}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, positive: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-positive); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfacePositive}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, warning: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-warning); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceWarning}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, negative: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-negative); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceNegative}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, info: css` - ${progressBarCircularTokens.backgroundStroke}: var(--surface-transparent-tertiary); - ${progressBarCircularTokens.progressStroke}: var(--surface-info); - ${progressBarCircularTokens.contentColor}: var(--text-primary); + ${progressBarCircularTokens.backgroundStroke}: ${surfaceTransparentTertiary}; + ${progressBarCircularTokens.progressStroke}: ${surfaceInfo}; + ${progressBarCircularTokens.contentColor}: ${textPrimary}; `, }, size: { @@ -50,12 +70,12 @@ export const config = { ${progressBarCircularTokens.width}: 8rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h2-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h2-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h2-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h2-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h2.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h2.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h2.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h2Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h2.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h2.lineHeight}; `, xl: css` ${progressBarCircularTokens.size}: 88; @@ -63,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-h5-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-h5-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-h5-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-h5-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; @@ -76,12 +96,12 @@ export const config = { ${progressBarCircularTokens.width}: 3.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-l-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-l-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-l-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-l-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-l-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyL.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyL.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyL.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyL.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyL.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyL.lineHeight}; `, m: css` ${progressBarCircularTokens.size}: 48; @@ -89,12 +109,12 @@ export const config = { ${progressBarCircularTokens.width}: 3rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-m-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyM.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyM.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyM.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyM.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyM.lineHeight}; `, s: css` ${progressBarCircularTokens.size}: 32; @@ -102,12 +122,12 @@ export const config = { ${progressBarCircularTokens.width}: 2.25rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-s-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${progressBarCircularTokens.size}: 24; @@ -115,12 +135,12 @@ export const config = { ${progressBarCircularTokens.width}: 1.5rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXS.lineHeight}; `, xxs: css` ${progressBarCircularTokens.size}: 16; @@ -128,12 +148,12 @@ export const config = { ${progressBarCircularTokens.width}: 1rem; ${progressBarCircularTokens.strokeWidth}: 0.125rem; ${progressBarCircularTokens.strokeSize}: 2; - ${progressBarCircularTokens.contentFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${progressBarCircularTokens.contentFontSize}: var(--plasma-typo-body-xxs-font-size); - ${progressBarCircularTokens.contentFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${progressBarCircularTokens.contentFontWeight}: var(--plasma-typo-body-xxs-body-font-weight); - ${progressBarCircularTokens.contentLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${progressBarCircularTokens.contentLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${progressBarCircularTokens.contentFontFamily}: ${bodyXXS.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${bodyXXS.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${bodyXXS.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${bodyXXS.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${bodyXXS.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-serv/src/components/Radiobox/Radiobox.config.ts b/packages/sdds-serv/src/components/Radiobox/Radiobox.config.ts index d5fc23d48b3..e4e6b369a66 100644 --- a/packages/sdds-serv/src/components/Radiobox/Radiobox.config.ts +++ b/packages/sdds-serv/src/components/Radiobox/Radiobox.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + textAccent, + textNegative, + textParagraph, + textPositive, + textPrimary, + textSecondary, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, radioboxTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,18 +37,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0; ${radioboxTokens.contentLeftOffset}: 0.5rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyS.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${radioboxTokens.margin}: 0; @@ -44,18 +60,18 @@ export const config = { ${radioboxTokens.contentTopOffset}: 0.125rem; ${radioboxTokens.contentLeftOffset}: 0.625rem; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); + ${radioboxTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyM.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${radioboxTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyS.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyS.lineHeight}; `, l: css` ${radioboxTokens.margin}: 0; @@ -66,19 +82,19 @@ export const config = { ${radioboxTokens.ellipseSize}: 0.625rem; ${radioboxTokens.contentTopOffset}: 0.0625rem; ${radioboxTokens.contentLeftOffset}: 0.75rem; - ${radioboxTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${radioboxTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${radioboxTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${radioboxTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${radioboxTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${radioboxTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); - ${radioboxTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); + ${radioboxTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${radioboxTokens.labelFontSize}: ${bodyL.fontSize}; + ${radioboxTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${radioboxTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${radioboxTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${radioboxTokens.labelLineHeight}: ${bodyL.lineHeight}; + ${radioboxTokens.descriptionFontFamily}: ${bodyM.fontFamily}; ${radioboxTokens.descriptionMarginTop}: 0.125rem; - ${radioboxTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${radioboxTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${radioboxTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${radioboxTokens.descriptionLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${radioboxTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); + ${radioboxTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${radioboxTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${radioboxTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${radioboxTokens.descriptionLetterSpacing}: ${bodyM.letterSpacing}; + ${radioboxTokens.descriptionLineHeight}: ${bodyM.lineHeight}; `, }, /** @@ -86,74 +102,74 @@ export const config = { */ view: { accent: css` - ${radioboxTokens.fillColor}: var(--text-accent); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textAccent}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated default: css` - ${radioboxTokens.fillColor}: var(--text-primary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPrimary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated secondary: css` - ${radioboxTokens.fillColor}: var(--text-secondary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textSecondary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated tertiary: css` - ${radioboxTokens.fillColor}: var(--text-tertiary); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textTertiary}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated paragraph: css` - ${radioboxTokens.fillColor}: var(--text-paragraph); - ${radioboxTokens.ellipseColor}: var(--inverse-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textParagraph}; + ${radioboxTokens.ellipseColor}: ${inverseTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated positive: css` - ${radioboxTokens.fillColor}: var(--text-positive); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textPositive}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated warning: css` - ${radioboxTokens.fillColor}: var(--text-warning); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textWarning}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, // deprecated negative: css` - ${radioboxTokens.fillColor}: var(--text-negative); - ${radioboxTokens.ellipseColor}: var(--on-dark-text-primary); - ${radioboxTokens.descriptionColor}: var(--text-secondary); + ${radioboxTokens.fillColor}: ${textNegative}; + ${radioboxTokens.ellipseColor}: ${onDarkTextPrimary}; + ${radioboxTokens.descriptionColor}: ${textSecondary}; ${radioboxTokens.triggerBackgroundColor}: transparent; - ${radioboxTokens.triggerBorderColor}: var(--text-secondary); + ${radioboxTokens.triggerBorderColor}: ${textSecondary}; ${radioboxTokens.triggerBorderCheckedColor}: transparent; `, }, @@ -164,7 +180,7 @@ export const config = { }, focused: { true: css` - ${radioboxTokens.focusColor}: var(--text-accent); + ${radioboxTokens.focusColor}: ${textAccent}; `, }, }, diff --git a/packages/sdds-serv/src/components/Range/Range.clear.config.ts b/packages/sdds-serv/src/components/Range/Range.clear.config.ts index 53faca3d526..1c8b9c3a013 100644 --- a/packages/sdds-serv/src/components/Range/Range.clear.config.ts +++ b/packages/sdds-serv/src/components/Range/Range.clear.config.ts @@ -1,3 +1,31 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceClear, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -14,57 +42,57 @@ export const config = { ${tokens.backgroundError}: transparent; ${tokens.backgroundSuccess}: transparent; - ${tokens.clearDividerColor}: var(--surface-transparent-tertiary); - - ${tokens.dividerColor}: var(--surface-transparent-clear); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.contentSlotColorSuccess}: var(--text-positive); - ${tokens.contentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.contentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.textFieldContentSlotColorSuccess}: var(--text-positive); - ${tokens.textFieldContentSlotColorSuccessHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorSuccessActive}: var(--text-positive-active); - - ${tokens.contentSlotColorError}: var(--text-negative); - ${tokens.contentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldContentSlotColorError}: var(--text-negative); - ${tokens.textFieldContentSlotColorErrorHover}: var(--text-negative-hover); - ${tokens.textFieldContentSlotColorErrorActive}: var(--text-negative-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldColorSuccess}: var(--text-positive); - ${tokens.textFieldColorError}: var(--text-negative); - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldClearPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.clearDividerColor}: ${surfaceTransparentTertiary}; + + ${tokens.dividerColor}: ${surfaceClear}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.contentSlotColorSuccess}: ${textPositive}; + ${tokens.contentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.contentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.textFieldContentSlotColorSuccess}: ${textPositive}; + ${tokens.textFieldContentSlotColorSuccessHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorSuccessActive}: ${textPositiveActive}; + + ${tokens.contentSlotColorError}: ${textNegative}; + ${tokens.contentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldContentSlotColorError}: ${textNegative}; + ${tokens.textFieldContentSlotColorErrorHover}: ${textNegativeHover}; + ${tokens.textFieldContentSlotColorErrorActive}: ${textNegativeActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldColorSuccess}: ${textPositive}; + ${tokens.textFieldColorError}: ${textNegative}; + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldClearPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldBackgroundColorHover}: transparent; ${tokens.textFieldBackgroundColorFocus}: transparent; @@ -75,15 +103,15 @@ export const config = { ${tokens.textFieldBackgroundSuccessColorHover}: transparent; ${tokens.textFieldBackgroundSuccessColorFocus}: transparent; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldDividerColorSuccess}: var(--surface-positive); - ${tokens.textFieldDividerColorError}: var(--surface-negative); - ${tokens.textFieldDividerColorHover}: var(--text-secondary); - ${tokens.textFieldDividerColorFocus}: var(--surface-accent); + ${tokens.textFieldDividerColorSuccess}: ${surfacePositive}; + ${tokens.textFieldDividerColorError}: ${surfaceNegative}; + ${tokens.textFieldDividerColorHover}: ${textSecondary}; + ${tokens.textFieldDividerColorFocus}: ${surfaceAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; `, }, size: { @@ -91,12 +119,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 1.5rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -104,24 +132,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -139,22 +167,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -168,12 +196,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 1.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 1.125rem 0 0; ${tokens.rightContentMargin}: 0; @@ -181,24 +209,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 2.25rem; @@ -216,22 +244,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -245,12 +273,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 1.25rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0.875rem 0 0; ${tokens.rightContentMargin}: 0; @@ -258,24 +286,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 2.375rem; @@ -293,22 +321,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -322,12 +350,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 1.125rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0.75rem 0 0; ${tokens.rightContentMargin}: 0; @@ -335,24 +363,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -370,22 +398,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -399,12 +427,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.875rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0.5rem 0 0; ${tokens.rightContentMargin}: 0; @@ -412,24 +440,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 1.5rem; @@ -447,22 +475,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -475,10 +503,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -491,12 +519,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -515,12 +543,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -538,16 +566,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-serv/src/components/Range/Range.config.ts b/packages/sdds-serv/src/components/Range/Range.config.ts index af1793bb835..1e14475c051 100644 --- a/packages/sdds-serv/src/components/Range/Range.config.ts +++ b/packages/sdds-serv/src/components/Range/Range.config.ts @@ -1,3 +1,32 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, rangeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,55 +39,55 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); - - ${tokens.dividerColor}: var(--text-primary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-primary); - ${tokens.contentSlotColorHover}: var(--text-primary-hover); - ${tokens.contentSlotColorActive}: var(--text-primary-active); - - ${tokens.embedIconButtonFocusColor}: var(--surface-accent); - ${tokens.contentSlotRightColor}: var(--text-primary); - ${tokens.contentSlotRightColorHover}: var(--text-primary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-primary-active); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldContentSlotRightColor}: var(--text-secondary); - ${tokens.textFieldContentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); - - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorHover}: var(--surface-transparent-negative-hover); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorHover}: var(--surface-transparent-positive-hover); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); - - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - - ${tokens.indicatorColor}: var(--surface-negative); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; + + ${tokens.dividerColor}: ${textPrimary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPrimary}; + ${tokens.contentSlotColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotColorActive}: ${textPrimaryActive}; + + ${tokens.embedIconButtonFocusColor}: ${surfaceAccent}; + ${tokens.contentSlotRightColor}: ${textPrimary}; + ${tokens.contentSlotRightColorHover}: ${textPrimaryHover}; + ${tokens.contentSlotRightColorActive}: ${textPrimaryActive}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldContentSlotRightColor}: ${textSecondary}; + ${tokens.textFieldContentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; + + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; + + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; `, }, size: { @@ -66,12 +95,12 @@ export const config = { ${tokens.borderRadius}: 1rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1.125rem; ${tokens.rightContentMargin}: 0; @@ -79,24 +108,24 @@ export const config = { ${tokens.textFieldHeight}: 4rem; ${tokens.textFieldBorderRadius}: 1rem; ${tokens.textFieldPadding}: 1.3125rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0; ${tokens.textFieldRightContentMargin}: -0.0625rem 0 -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 4rem; ${tokens.embedIconButtonWidth}: 4rem; @@ -114,22 +143,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.813rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -142,12 +171,12 @@ export const config = { ${tokens.borderRadius}: 0.875rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.dividerFontFamily}: ${bodyL.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyL.fontStyle}; + ${tokens.dividerFontSize}: ${bodyL.fontSize}; + ${tokens.dividerFontWeight}: ${bodyL.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyL.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; @@ -155,24 +184,24 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.embedIconButtonHeight}: 3.5rem; ${tokens.embedIconButtonWidth}: 3.5rem; @@ -190,22 +219,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.563rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.375rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -218,12 +247,12 @@ export const config = { ${tokens.borderRadius}: 0.75rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.dividerFontFamily}: ${bodyM.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyM.fontStyle}; + ${tokens.dividerFontSize}: ${bodyM.fontSize}; + ${tokens.dividerFontWeight}: ${bodyM.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyM.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; @@ -231,24 +260,24 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.embedIconButtonHeight}: 3rem; ${tokens.embedIconButtonWidth}: 3rem; @@ -266,22 +295,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.313rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.313rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -294,12 +323,12 @@ export const config = { ${tokens.borderRadius}: 0.625rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.dividerFontFamily}: ${bodyS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; @@ -307,24 +336,24 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.embedIconButtonHeight}: 2.5rem; ${tokens.embedIconButtonWidth}: 2.5rem; @@ -342,22 +371,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 0.063rem 0 -0.438rem; ${tokens.titleCaptionOffset}: 0.188rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -370,12 +399,12 @@ export const config = { ${tokens.borderRadius}: 0.5rem; ${tokens.dividerPadding}: 0 0.375rem; - ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.dividerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.dividerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.dividerFontSize}: ${bodyXS.fontSize}; + ${tokens.dividerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.dividerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.dividerLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; @@ -383,24 +412,24 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.embedIconButtonHeight}: 2rem; ${tokens.embedIconButtonWidth}: 2rem; @@ -418,22 +447,22 @@ export const config = { ${tokens.hintPlacementInnerMargin}: 0 -0.188rem 0 -0.688rem; ${tokens.titleCaptionOffset}: 0; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.helpersPadding}: 0.25rem 0 0 0; ${tokens.helpersGap}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -445,10 +474,10 @@ export const config = { }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -461,12 +490,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -485,12 +514,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -508,16 +537,16 @@ export const config = { }, readOnly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; - ${tokens.dividerColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: ${textSecondary}; ${tokens.readOnlyOpacity}: 0.1; ${tokens.dividerOpacityReadOnly}: 0.4; ${tokens.rightContentOpacityReadOnly}: 0.4; - ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; ${tokens.textFieldBackgroundColorReadOnly}: transparent; - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-serv/src/components/Rating/Rating.config.ts b/packages/sdds-serv/src/components/Rating/Rating.config.ts index 79e9f36f886..09dbeddd0ba 100644 --- a/packages/sdds-serv/src/components/Rating/Rating.config.ts +++ b/packages/sdds-serv/src/components/Rating/Rating.config.ts @@ -1,3 +1,36 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + bodyXXS, + bodyXXSBold, + dsplL, + dsplLBold, + dsplM, + dsplMBold, + dsplS, + dsplSBold, + h1, + h1Bold, + h2, + h2Bold, + h3, + h3Bold, + h4, + h4Bold, + h5, + h5Bold, + h6, + h6Bold, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, ratingTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +41,36 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); - ${tokens.iconColor}: var(--text-primary); - ${tokens.outlineIconColor}: var(--text-primary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; + ${tokens.iconColor}: ${textPrimary}; + ${tokens.outlineIconColor}: ${textPrimary}; `, accent: css` - ${tokens.color}: var(--text-primary); - ${tokens.helperTextColor}: var(--text-secondary); + ${tokens.color}: ${textPrimary}; + ${tokens.helperTextColor}: ${textSecondary}; // TODO: change with token data-yellow, when it will be added to theme ${tokens.iconColor}: #F3A912; - ${tokens.outlineIconColor}: var(--text-tertiary); + ${tokens.outlineIconColor}: ${textTertiary}; `, }, size: { l: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -48,19 +81,19 @@ export const config = { m: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -71,19 +104,19 @@ export const config = { s: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodySBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.5rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -94,19 +127,19 @@ export const config = { xs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.iconMarginBottom}: 0.125rem; ${tokens.contentGap}: 0.375rem; @@ -121,19 +154,19 @@ export const config = { xxs: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xxs-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.fontFamily}: ${bodyXXS.fontFamily}; + ${tokens.fontSize}: ${bodyXXS.fontSize}; + ${tokens.fontStyle}: ${bodyXXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXXSBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXXS.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXXS.lineHeight}; ${tokens.contentGap}: 0.375rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -146,19 +179,19 @@ export const config = { h1: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h1-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tokens.fontFamily}: ${h1.fontFamily}; + ${tokens.fontSize}: ${h1.fontSize}; + ${tokens.fontStyle}: ${h1.fontStyle}; + ${tokens.fontWeight}: ${h1Bold.fontWeight}; + ${tokens.letterSpacing}: ${h1.letterSpacing}; + ${tokens.lineHeight}: ${h1.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.helperTextFontFamily}: ${bodyM.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyM.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyM.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyM.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyM.lineHeight}; ${tokens.contentGap}: 1rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -177,19 +210,19 @@ export const config = { h2: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h2-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tokens.fontFamily}: ${h2.fontFamily}; + ${tokens.fontSize}: ${h2.fontSize}; + ${tokens.fontStyle}: ${h2.fontStyle}; + ${tokens.fontWeight}: ${h2Bold.fontWeight}; + ${tokens.letterSpacing}: ${h2.letterSpacing}; + ${tokens.lineHeight}: ${h2.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyS.lineHeight}; ${tokens.contentGap}: 0.875rem; ${tokens.singleIconContentGap}: 0.5rem; @@ -208,19 +241,19 @@ export const config = { h3: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h3-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.fontFamily}: ${h3.fontFamily}; + ${tokens.fontSize}: ${h3.fontSize}; + ${tokens.fontStyle}: ${h3.fontStyle}; + ${tokens.fontWeight}: ${h3Bold.fontWeight}; + ${tokens.letterSpacing}: ${h3.letterSpacing}; + ${tokens.lineHeight}: ${h3.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.75rem; ${tokens.singleIconContentGap}: 0.375rem; @@ -239,19 +272,19 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h4-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.fontFamily}: ${h4.fontFamily}; + ${tokens.fontSize}: ${h4.fontSize}; + ${tokens.fontStyle}: ${h4.fontStyle}; + ${tokens.fontWeight}: ${h4Bold.fontWeight}; + ${tokens.letterSpacing}: ${h4.letterSpacing}; + ${tokens.lineHeight}: ${h4.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -270,19 +303,19 @@ export const config = { h5: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h5-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.fontFamily}: ${h5.fontFamily}; + ${tokens.fontSize}: ${h5.fontSize}; + ${tokens.fontStyle}: ${h5.fontStyle}; + ${tokens.fontWeight}: ${h5Bold.fontWeight}; + ${tokens.letterSpacing}: ${h5.letterSpacing}; + ${tokens.lineHeight}: ${h5.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -301,19 +334,19 @@ export const config = { h6: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tokens.fontWeight}: var(--plasma-typo-h6-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tokens.fontFamily}: ${h6.fontFamily}; + ${tokens.fontSize}: ${h6.fontSize}; + ${tokens.fontStyle}: ${h6.fontStyle}; + ${tokens.fontWeight}: ${h6Bold.fontWeight}; + ${tokens.letterSpacing}: ${h6.letterSpacing}; + ${tokens.lineHeight}: ${h6.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyXS.lineHeight}; ${tokens.contentGap}: 0.625rem; ${tokens.singleIconContentGap}: 0.25rem; @@ -332,19 +365,19 @@ export const config = { displayL: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-l-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); + ${tokens.fontFamily}: ${dsplL.fontFamily}; + ${tokens.fontSize}: ${dsplL.fontSize}; + ${tokens.fontStyle}: ${dsplL.fontStyle}; + ${tokens.fontWeight}: ${dsplLBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplL.letterSpacing}; + ${tokens.lineHeight}: ${dsplL.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-h3-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-h3-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-h3-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-h3-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.helperTextFontFamily}: ${h3.fontFamily}; + ${tokens.helperTextFontSize}: ${h3.fontSize}; + ${tokens.helperTextFontStyle}: ${h3.fontStyle}; + ${tokens.helperTextFontWeight}: ${h3.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing}; + ${tokens.helperTextLineHeight}: ${h3.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -363,19 +396,19 @@ export const config = { displayM: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-m-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); + ${tokens.fontFamily}: ${dsplM.fontFamily}; + ${tokens.fontSize}: ${dsplM.fontSize}; + ${tokens.fontStyle}: ${dsplM.fontStyle}; + ${tokens.fontWeight}: ${dsplMBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplM.letterSpacing}; + ${tokens.lineHeight}: ${dsplM.lineHeight}; - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -394,19 +427,19 @@ export const config = { displayS: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-dspl-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-dspl-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-dspl-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-dspl-s-bold-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - - ${tokens.helperTextFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.helperTextFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.helperTextFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.helperTextFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.helperTextLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.helperTextLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${dsplS.fontFamily}; + ${tokens.fontSize}: ${dsplS.fontSize}; + ${tokens.fontStyle}: ${dsplS.fontStyle}; + ${tokens.fontWeight}: ${dsplSBold.fontWeight}; + ${tokens.letterSpacing}: ${dsplS.letterSpacing}; + ${tokens.lineHeight}: ${dsplS.lineHeight}; + + ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; + ${tokens.helperTextFontSize}: ${bodyL.fontSize}; + ${tokens.helperTextFontStyle}: ${bodyL.fontStyle}; + ${tokens.helperTextFontWeight}: ${bodyL.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.helperTextLineHeight}: ${bodyL.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; diff --git a/packages/sdds-serv/src/components/Segment/SegmentGroup.config.ts b/packages/sdds-serv/src/components/Segment/SegmentGroup.config.ts index b03cb7140c7..5041af6d560 100644 --- a/packages/sdds-serv/src/components/Segment/SegmentGroup.config.ts +++ b/packages/sdds-serv/src/components/Segment/SegmentGroup.config.ts @@ -1,3 +1,4 @@ +import { surfaceTransparentSecondary, textAccent, textSecondary } from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,14 +9,14 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, filled: css` - ${segmentTokens.arrowColor}: var(--text-secondary); + ${segmentTokens.arrowColor}: ${textSecondary}; ${segmentTokens.groupBackgroundColor}: transparent; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -74,7 +75,7 @@ export const config = { }, filledBackground: { true: css` - ${segmentTokens.groupFilledBackgroundColor}: var(--surface-transparent-secondary); + ${segmentTokens.groupFilledBackgroundColor}: ${surfaceTransparentSecondary}; `, }, orientation: { diff --git a/packages/sdds-serv/src/components/Segment/SegmentItem.config.ts b/packages/sdds-serv/src/components/Segment/SegmentItem.config.ts index 550c948b39d..f1c3dbe4ed7 100644 --- a/packages/sdds-serv/src/components/Segment/SegmentItem.config.ts +++ b/packages/sdds-serv/src/components/Segment/SegmentItem.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + inverseTextPrimary, + inverseTextPrimaryHover, + inverseTextSecondary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + onDarkTextSecondary, + surfaceAccent, + surfaceSolidDefault, + surfaceTransparentCard, + textAccent, + textPrimary, + textPrimaryHover, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, segmentTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,68 +32,68 @@ export const config = { variations: { view: { clear: css` - ${segmentTokens.itemColor}: var(--text-secondary); + ${segmentTokens.itemColor}: ${textSecondary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-tertiary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary-hover); + ${segmentTokens.itemAdditionalColor}: ${textTertiary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimaryHover}; ${segmentTokens.itemSelectedBackgroundColor}: transparent; - ${segmentTokens.itemSelectedColorHover}: var(--text-primary); + ${segmentTokens.itemSelectedColorHover}: ${textPrimary}; ${segmentTokens.itemSelectedBackgroundColorHover}: transparent; - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, secondary: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedColorHover}: var(--text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-transparent-card); - ${segmentTokens.itemSelectedAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${textPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedColorHover}: ${textPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceTransparentCard}; + ${segmentTokens.itemSelectedAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${textSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, default: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--inverse-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${segmentTokens.itemSelectedColorHover}: var(--inverse-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); - ${segmentTokens.itemSelectedAdditionalColor}: var(--inverse-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--inverse-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedColorHover}: ${inverseTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; + ${segmentTokens.itemSelectedAdditionalColor}: ${inverseTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${inverseTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, accent: css` - ${segmentTokens.itemColor}: var(--text-primary); + ${segmentTokens.itemColor}: ${textPrimary}; ${segmentTokens.itemBackgroundColor}: transparent; - ${segmentTokens.itemColorHover}: var(--text-primary-hover); + ${segmentTokens.itemColorHover}: ${textPrimaryHover}; ${segmentTokens.itemBackgroundColorHover}: transparent; - ${segmentTokens.itemAdditionalColor}: var(--text-secondary); - ${segmentTokens.itemAdditionalColorHover}: var(--text-secondary); - ${segmentTokens.itemSelectedColor}: var(--on-dark-text-primary); - ${segmentTokens.itemSelectedBackgroundColor}: var(--surface-accent); - ${segmentTokens.itemSelectedColorHover}: var(--on-dark-text-primary-hover); - ${segmentTokens.itemSelectedBackgroundColorHover}: var(--surface-accent); - ${segmentTokens.itemSelectedAdditionalColor}: var(--on-dark-text-secondary); - ${segmentTokens.itemSelectedAdditionalColorHover}: var(--on-dark-text-secondary); + ${segmentTokens.itemAdditionalColor}: ${textSecondary}; + ${segmentTokens.itemAdditionalColorHover}: ${textSecondary}; + ${segmentTokens.itemSelectedColor}: ${onDarkTextPrimary}; + ${segmentTokens.itemSelectedBackgroundColor}: ${surfaceAccent}; + ${segmentTokens.itemSelectedColorHover}: ${onDarkTextPrimaryHover}; + ${segmentTokens.itemSelectedBackgroundColorHover}: ${surfaceAccent}; + ${segmentTokens.itemSelectedAdditionalColor}: ${onDarkTextSecondary}; + ${segmentTokens.itemSelectedAdditionalColorHover}: ${onDarkTextSecondary}; - ${segmentTokens.groupFilledBackgroundColor}: var(--text-accent); + ${segmentTokens.groupFilledBackgroundColor}: ${textAccent}; `, }, size: { @@ -83,12 +107,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${segmentTokens.fontFamily}: ${bodyXS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyXS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyXS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyXS.lineHeight}; `, s: css` ${segmentTokens.itemBorderRadius}: 0.625rem; @@ -100,12 +124,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.125rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${segmentTokens.fontFamily}: ${bodyS.fontFamily}; + ${segmentTokens.fontSize}: ${bodyS.fontSize}; + ${segmentTokens.fontStyle}: ${bodyS.fontStyle}; + ${segmentTokens.fontWeight}: ${bodySBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyS.lineHeight}; `, m: css` ${segmentTokens.itemBorderRadius}: 0.75rem; @@ -117,12 +141,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.25rem; ${segmentTokens.itemMarginLeft}: 0rem; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${segmentTokens.fontFamily}: ${bodyM.fontFamily}; + ${segmentTokens.fontSize}: ${bodyM.fontSize}; + ${segmentTokens.fontStyle}: ${bodyM.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyM.lineHeight}; `, l: css` ${segmentTokens.itemBorderRadius}: 0.875rem; @@ -134,12 +158,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, xl: css` ${segmentTokens.itemBorderRadius}: 1rem; @@ -151,12 +175,12 @@ export const config = { ${segmentTokens.itemIconMargin}: 0.375rem; ${segmentTokens.itemMarginLeft}: 0; - ${segmentTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${segmentTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${segmentTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${segmentTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${segmentTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${segmentTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${segmentTokens.fontFamily}: ${bodyL.fontFamily}; + ${segmentTokens.fontSize}: ${bodyL.fontSize}; + ${segmentTokens.fontStyle}: ${bodyL.fontStyle}; + ${segmentTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${segmentTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${segmentTokens.lineHeight}: ${bodyL.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-serv/src/components/Select/Select.config.ts b/packages/sdds-serv/src/components/Select/Select.config.ts index 8522cb0d6c0..8eabe9519a8 100644 --- a/packages/sdds-serv/src/components/Select/Select.config.ts +++ b/packages/sdds-serv/src/components/Select/Select.config.ts @@ -1,3 +1,75 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextPrimaryActive, + inverseTextPrimaryHover, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkSurfaceSolidDefault, + onDarkSurfaceSolidDefaultActive, + onDarkSurfaceSolidDefaultHover, + onDarkTextPrimary, + onDarkTextPrimaryActive, + onDarkTextPrimaryHover, + onDarkTextSecondary, + onDarkTextSecondaryActive, + onDarkTextSecondaryHover, + onLightSurfaceSolidDefault, + onLightSurfaceSolidDefaultActive, + onLightSurfaceSolidDefaultHover, + onLightSurfaceTransparentDeep, + onLightSurfaceTransparentDeepActive, + onLightSurfaceTransparentDeepHover, + onLightTextPrimary, + onLightTextPrimaryActive, + onLightTextPrimaryHover, + onLightTextSecondary, + onLightTextSecondaryActive, + onLightTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCard, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryActive, + textPrimaryHover, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, selectTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,348 +82,348 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-secondary); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--inverse-text-primary); - ${tokens.buttonColorHover}: var(--inverse-text-primary-hover); - ${tokens.buttonColorActive}: var(--inverse-text-primary-active); - ${tokens.buttonArrowColor}: var(--inverse-text-secondary); - ${tokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-solid-default); - ${tokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-solid-default-hover); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textSecondary}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${inverseTextPrimary}; + ${tokens.buttonColorHover}: ${inverseTextPrimaryHover}; + ${tokens.buttonColorActive}: ${inverseTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${inverseTextSecondary}; + ${tokens.buttonArrowColorHover}: ${inverseTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${inverseTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}: ${surfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceSolidDefaultHover}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-positive); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-positive); - ${tokens.buttonBackgroundColorHover}:var(--surface-positive-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-positive-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textPositive}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfacePositive}; + ${tokens.buttonBackgroundColorHover}:${surfacePositiveHover}; + ${tokens.buttonBackgroundColorActive}:${surfacePositiveActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-warning); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-warning); - ${tokens.buttonBackgroundColorHover}:var(--surface-warning-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-warning-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textWarning}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceWarning}; + ${tokens.buttonBackgroundColorHover}:${surfaceWarningHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceWarningActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); - ${tokens.textFieldLabelColor}: var(--text-primary); - ${tokens.textFieldLeftHelperColor}: var(--text-negative); - ${tokens.textFieldFocusColor}: var(--text-accent); - - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); - - ${tokens.textFieldIndicatorColor}: var(--surface-negative); - ${tokens.textFieldOptionalColor}: var(--text-tertiary); - - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}:var(--surface-negative); - ${tokens.buttonBackgroundColorHover}: var(--surface-negative-hover); - ${tokens.buttonBackgroundColorActive}:var(--surface-negative-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.textFieldColor}: ${textPrimary}; + + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; + ${tokens.textFieldLabelColor}: ${textPrimary}; + ${tokens.textFieldLeftHelperColor}: ${textNegative}; + ${tokens.textFieldFocusColor}: ${textAccent}; + + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.textFieldIndicatorColor}: ${surfaceNegative}; + ${tokens.textFieldOptionalColor}: ${textTertiary}; + + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}:${surfaceNegative}; + ${tokens.buttonBackgroundColorHover}: ${surfaceNegativeHover}; + ${tokens.buttonBackgroundColorActive}:${surfaceNegativeActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); - ${tokens.textFieldHintIconColor}: var(--text-secondary); + ${tokens.itemDisabledColor}: ${textPrimary}; + ${tokens.textFieldHintIconColor}: ${textSecondary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, accent: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-accent); - ${tokens.buttonBackgroundColorHover}: var(--surface-accent-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-accent-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceAccent}; + ${tokens.buttonBackgroundColorHover}: ${surfaceAccentHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceAccentActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, secondary: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-hover); - ${tokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${tokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryHover}; + ${tokens.buttonBackgroundColor}: ${surfaceTransparentSecondary}; + ${tokens.buttonBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.buttonBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, clear: css` - ${tokens.buttonColor}: var(--text-primary); - ${tokens.buttonColorHover}: var(--text-primary-hover); - ${tokens.buttonColorActive}: var(--text-primary-active); - ${tokens.buttonArrowColor}: var(--text-secondary); - ${tokens.buttonArrowColorHover}: var(--text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--text-secondary-active); - ${tokens.buttonBackgroundColor}: var(--surface-clear); - ${tokens.buttonBackgroundColorHover}: var(--surface-clear); - ${tokens.buttonBackgroundColorActive}: var(--surface-clear); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${textPrimary}; + ${tokens.buttonColorHover}: ${textPrimaryHover}; + ${tokens.buttonColorActive}: ${textPrimaryActive}; + ${tokens.buttonArrowColor}: ${textSecondary}; + ${tokens.buttonArrowColorHover}: ${textSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${textSecondaryActive}; + ${tokens.buttonBackgroundColor}: ${surfaceClear}; + ${tokens.buttonBackgroundColorHover}: ${surfaceClear}; + ${tokens.buttonBackgroundColorActive}: ${surfaceClear}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, dark: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-transparent-deep); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceTransparentDeep}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceTransparentDeepHover}; + ${tokens.buttonBackgroundColorActive}:${onLightSurfaceTransparentDeepActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, black: css` - ${tokens.buttonColor}: var(--on-dark-text-primary); - ${tokens.buttonColorHover}: var(--on-dark-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-dark-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-dark-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-dark-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-dark-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-light-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}: var(--on-light-surface-solid-default-active); - - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.buttonColor}: ${onDarkTextPrimary}; + ${tokens.buttonColorHover}: ${onDarkTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onDarkTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onDarkTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onDarkTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onDarkTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onLightSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onLightSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}: ${onLightSurfaceSolidDefaultActive}; + + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, white: css` - ${tokens.buttonColor}: var(--on-light-text-primary); - ${tokens.buttonColorHover}: var(--on-light-text-primary-hover); - ${tokens.buttonColorActive}: var(--on-light-text-primary-active); - ${tokens.buttonArrowColor}: var(--on-light-text-secondary); - ${tokens.buttonArrowColorHover}: var(--on-light-text-secondary-hover); - ${tokens.buttonArrowColorActive}: var(--on-light-text-secondary-active); - ${tokens.buttonBackgroundColor}:var(--on-dark-surface-solid-default); - ${tokens.buttonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); - ${tokens.buttonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); - - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.disclosureIconColor}: var(--text-secondary); - ${tokens.disclosureIconColorHover}: var(--text-secondary-hover); + ${tokens.buttonColor}: ${onLightTextPrimary}; + ${tokens.buttonColorHover}: ${onLightTextPrimaryHover}; + ${tokens.buttonColorActive}: ${onLightTextPrimaryActive}; + ${tokens.buttonArrowColor}: ${onLightTextSecondary}; + ${tokens.buttonArrowColorHover}: ${onLightTextSecondaryHover}; + ${tokens.buttonArrowColorActive}: ${onLightTextSecondaryActive}; + ${tokens.buttonBackgroundColor}:${onDarkSurfaceSolidDefault}; + ${tokens.buttonBackgroundColorHover}:${onDarkSurfaceSolidDefaultHover}; + ${tokens.buttonBackgroundColorActive}:${onDarkSurfaceSolidDefaultActive}; + + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.disclosureIconColor}: ${textSecondary}; + ${tokens.disclosureIconColorHover}: ${textSecondaryHover}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledColor}: var(--text-primary); + ${tokens.itemDisabledColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; - ${tokens.itemIconColor}: var(--text-accent); + ${tokens.itemIconColor}: ${textAccent}; - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxIconColor}: ${onDarkTextPrimary}; ${tokens.checkboxTriggerBorderCheckedColor}: transparent; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; `, }, size: { @@ -371,20 +443,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLabelOffset}: 0.75rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -392,12 +464,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -420,12 +492,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.625rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.5rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyL.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; ${tokens.targetHeight}: 3.5rem; @@ -451,19 +523,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.cellTitleFontFamily}: ${bodyL.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyL.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyL.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyL.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyL.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -496,20 +568,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLabelOffset}: 0.625rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -517,12 +589,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -545,12 +617,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.5rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1.25rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyM.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; ${tokens.targetHeight}: 3rem; @@ -576,19 +648,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.cellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyM.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 1.25rem; @@ -621,20 +693,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.5rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldHintMargin}: -0.688rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -642,12 +714,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -670,12 +742,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.375rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 1rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2.5rem; @@ -701,19 +773,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.375rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.cellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyS.lineHeight}; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -746,20 +818,20 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelOffset}: 0.375rem; - ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldHintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.textFieldHintTargetSize}: 2.375rem; @@ -767,12 +839,12 @@ export const config = { ${tokens.textFieldClearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.textFieldLeftHelperOffset}: 0.25rem; - ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLeftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLeftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLeftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLeftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLeftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -795,12 +867,12 @@ export const config = { ${tokens.textFieldChipClearContentMarginLeft}: 0.25rem; ${tokens.textFieldChipClearContentMarginRight}: 0rem; ${tokens.textFieldChipCloseIconSize}: 0.75rem; - ${tokens.textFieldChipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldChipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldChipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldChipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldChipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldChipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldChipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldChipFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldChipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldChipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldChipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldChipLineHeight}: ${bodyXS.lineHeight}; ${tokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; ${tokens.targetHeight}: 2rem; @@ -826,19 +898,19 @@ export const config = { ${tokens.cellPaddingRightContent}: 0rem; ${tokens.cellTextboxGap}: 0.125rem; ${tokens.cellGap}: 0.25rem; - ${tokens.cellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.cellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.cellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.cellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.cellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.cellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.cellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.cellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.cellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.cellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.cellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.cellTitleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.fontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.fontLineHeight}: ${bodyXS.lineHeight}; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerSizeTight}: 0.875rem; @@ -858,69 +930,69 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldLabelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldLabelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldLabelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldLabelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLabelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLabelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.textFieldChipColor}: var(--inverse-text-primary); - ${tokens.textFieldChipColorHover}: var(--inverse-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-solid-default); - ${tokens.textFieldChipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.textFieldChipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--inverse-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnly}: var(--inverse-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.textFieldChipColorReadOnlyHover}: var(--inverse-text-primary); + ${tokens.textFieldChipColor}: ${inverseTextPrimary}; + ${tokens.textFieldChipColorHover}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceSolidDefault}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.textFieldChipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${inverseTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.textFieldChipColorReadOnlyHover}: ${inverseTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, secondary: css` - ${tokens.textFieldChipColor}: var(--text-primary); - ${tokens.textFieldChipColorHover}: var(--text-primary); - ${tokens.textFieldChipBackground}: var(--surface-transparent-secondary); - ${tokens.textFieldChipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.textFieldChipCloseIconColor}: var(--text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--text-secondary-hover); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--text-secondary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnly}: var(--text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.textFieldChipColorReadOnlyHover}: var(--text-primary); + ${tokens.textFieldChipColor}: ${textPrimary}; + ${tokens.textFieldChipColorHover}: ${textPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.textFieldChipCloseIconColor}: ${textSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${textSecondaryHover}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${textSecondary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnly}: ${textPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.textFieldChipColorReadOnlyHover}: ${textPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, accent: css` - ${tokens.textFieldChipColor}: var(--on-dark-text-primary); - ${tokens.textFieldChipColorHover}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackground}: var(--surface-accent); - ${tokens.textFieldChipBackgroundHover}: var(--surface-accent-hover); - ${tokens.textFieldChipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.textFieldChipCloseIconColorHover}: var(--on-dark-text-primary); - - ${tokens.textFieldChipBackgroundReadOnly}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.textFieldChipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.textFieldChipColorReadOnlyHover}: var(--on-dark-text-primary); + ${tokens.textFieldChipColor}: ${onDarkTextPrimary}; + ${tokens.textFieldChipColorHover}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackground}: ${surfaceAccent}; + ${tokens.textFieldChipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.textFieldChipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.textFieldChipCloseIconColorHover}: ${onDarkTextPrimary}; + + ${tokens.textFieldChipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.textFieldChipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.textFieldChipColorReadOnlyHover}: ${onDarkTextPrimary}; ${tokens.textFieldChipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.textFieldTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.textFieldTooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.textFieldTooltipColor}: var(--text-primary); - ${tokens.textFieldTooltipArrowBackground}: var(--surface-solid-card); + ${tokens.textFieldTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.textFieldTooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.textFieldTooltipColor}: ${textPrimary}; + ${tokens.textFieldTooltipArrowBackground}: ${surfaceSolidCard}; `, }, hintSize: { @@ -933,12 +1005,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2.5rem; ${tokens.textFieldTooltipBorderRadius}: 0.625rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.375rem; @@ -957,12 +1029,12 @@ export const config = { ${tokens.textFieldTooltipMinHeight}: 2rem; ${tokens.textFieldTooltipBorderRadius}: 0.5rem; - ${tokens.textFieldTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldTooltipContentLeftMargin}: 0.25rem; @@ -982,12 +1054,12 @@ export const config = { true: css` ${tokens.disclosureIconOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); - ${tokens.textFieldTitleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.textFieldLabelColorReadOnly}: var(--text-primary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLeftHelperColorReadOnly}: ${textSecondary}; + ${tokens.textFieldTitleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.textFieldLabelColorReadOnly}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-serv/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-serv/src/components/Skeleton/LineSkeleton.config.ts index 75d2ee7a606..8d106f29b94 100644 --- a/packages/sdds-serv/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-serv/src/components/Skeleton/LineSkeleton.config.ts @@ -1,3 +1,27 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + dsplL, + dsplM, + dsplS, + h1, + h2, + h3, + h4, + h5, + h6, + surfaceSkeletonDeepGradient, + surfaceSkeletonGradient, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textL, + textM, + textS, + textXS, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, skeletonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,88 +32,88 @@ export const config = { variations: { view: { default: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient, var(--surface-skeleton-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, lighter: css` - ${skeletonTokens.gradientColor}: var(--plasma-colors-skeleton-gradient-lighter, var(--surface-skeleton-deep-gradient)); - ${skeletonTokens.fadeInColor}: var(--surface-transparent-secondary); - ${skeletonTokens.fadeOutColor}: var(--surface-transparent-tertiary); + ${skeletonTokens.gradientColor}: ${surfaceSkeletonDeepGradient}; + ${skeletonTokens.fadeInColor}: ${surfaceTransparentSecondary}; + ${skeletonTokens.fadeOutColor}: ${surfaceTransparentTertiary}; `, }, size: { bodyL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-l-font-size); + ${skeletonTokens.lineHeight}: ${bodyL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyL.fontSize}; `, bodyM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-m-font-size); + ${skeletonTokens.lineHeight}: ${bodyM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyM.fontSize}; `, bodyS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-s-font-size); + ${skeletonTokens.lineHeight}: ${bodyS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyS.fontSize}; `, bodyXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXS.fontSize}; `, bodyXXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-body-xxs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-body-xxs-font-size); + ${skeletonTokens.lineHeight}: ${bodyXXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${bodyXXS.fontSize}; `, dsplL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-l-font-size); + ${skeletonTokens.lineHeight}: ${dsplL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplL.fontSize}; `, dsplM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-m-font-size); + ${skeletonTokens.lineHeight}: ${dsplM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplM.fontSize}; `, dsplS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-dspl-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-dspl-s-font-size); + ${skeletonTokens.lineHeight}: ${dsplS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${dsplS.fontSize}; `, h1: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h1-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h1-font-size); + ${skeletonTokens.lineHeight}: ${h1.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h1.fontSize}; `, h2: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h2-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h2-font-size); + ${skeletonTokens.lineHeight}: ${h2.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h2.fontSize}; `, h3: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h3-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h3-font-size); + ${skeletonTokens.lineHeight}: ${h3.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h3.fontSize}; `, h4: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h4-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h4-font-size); + ${skeletonTokens.lineHeight}: ${h4.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h4.fontSize}; `, h5: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h5-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h5-font-size); + ${skeletonTokens.lineHeight}: ${h5.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h5.fontSize}; `, h6: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-h6-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-h6-font-size); + ${skeletonTokens.lineHeight}: ${h6.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${h6.fontSize}; `, textL: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-l-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-l-font-size); + ${skeletonTokens.lineHeight}: ${textL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textL.fontSize}; `, textM: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-m-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-m-font-size); + ${skeletonTokens.lineHeight}: ${textM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textM.fontSize}; `, textS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-s-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-s-font-size); + ${skeletonTokens.lineHeight}: ${textS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textS.fontSize}; `, textXS: css` - ${skeletonTokens.lineHeight}: var(--plasma-typo-text-xs-line-height); - ${skeletonTokens.visibleLineHeight}: var(--plasma-typo-text-xs-font-size); + ${skeletonTokens.lineHeight}: ${textXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${textXS.fontSize}; `, }, }, diff --git a/packages/sdds-serv/src/components/Slider/Slider.config.ts b/packages/sdds-serv/src/components/Slider/Slider.config.ts index c171f134490..5bc665633d3 100644 --- a/packages/sdds-serv/src/components/Slider/Slider.config.ts +++ b/packages/sdds-serv/src/components/Slider/Slider.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + surfaceAccent, + surfaceAccentGradient, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + textAccent, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,70 +25,70 @@ export const config = { variations: { view: { default: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceSolidDefault}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-solid-default); + ${sliderTokens.fillColor}: ${surfaceSolidDefault}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, accent: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccent}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent); + ${sliderTokens.fillColor}: ${surfaceAccent}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, gradient: css` - ${sliderTokens.labelColor}: var(--text-primary); + ${sliderTokens.labelColor}: ${textPrimary}; - ${sliderTokens.rangeValueColor}: var(--text-secondary); + ${sliderTokens.rangeValueColor}: ${textSecondary}; - ${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary); - ${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card); - ${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient); + ${sliderTokens.thumbBorderColor}: ${surfaceSolidTertiary}; + ${sliderTokens.thumbBackgroundColor}: ${onLightSurfaceSolidCard}; + ${sliderTokens.thumbFocusBorderColor}: ${surfaceAccentGradient}; - ${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary); + ${sliderTokens.railBackgroundColor}: ${surfaceSolidTertiary}; - ${sliderTokens.fillColor}: var(--surface-accent-gradient); + ${sliderTokens.fillColor}: ${surfaceAccentGradient}; - ${sliderTokens.textFieldCaretColor}: var(--text-accent); - ${sliderTokens.textFieldColor}: var(--text-primary); - ${sliderTokens.textFiledFocusColor}: var(--text-primary); - ${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary); + ${sliderTokens.textFieldCaretColor}: ${textAccent}; + ${sliderTokens.textFieldColor}: ${textPrimary}; + ${sliderTokens.textFiledFocusColor}: ${textPrimary}; + ${sliderTokens.textFieldPlaceholderColor}: ${textSecondary}; - ${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${sliderTokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${sliderTokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${sliderTokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${sliderTokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${sliderTokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; `, }, size: { @@ -85,24 +102,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 1rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.labelFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyL.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyL.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.875rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.75rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.valueFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyM.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -119,12 +136,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3.5rem; ${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyL.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyL.lineHeight}; `, m: css` ${sliderTokens.size}: 1.5rem; @@ -136,24 +153,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.75rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.labelFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyM.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyM.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.75rem; ${sliderTokens.rangeValueBottomOffset}: 0.75rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.875rem; ${sliderTokens.rangeValueVerticalMargin}: 0.625rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.valueFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -170,12 +187,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 3rem; ${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.75rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyM.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyM.lineHeight}; `, s: css` ${sliderTokens.size}: 1rem; @@ -187,24 +204,24 @@ export const config = { ${sliderTokens.labelWrapperOnlyIconMarginRight}: 0.625rem; ${sliderTokens.labelWrapperVerticalMargin}: 0.625rem; - ${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.labelFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.labelFontSize}: ${bodyS.fontSize}; + ${sliderTokens.labelFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.labelFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.labelLineHeight}: ${bodyS.lineHeight}; ${sliderTokens.rangeValueHorizontalMargin}: 0.5rem; ${sliderTokens.rangeValueBottomOffset}: 0.625rem; ${sliderTokens.rangeValueHorizontalOffset}: 0.625rem; ${sliderTokens.rangeValueVerticalMargin}: 0.5rem; - ${sliderTokens.valueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${sliderTokens.valueFontSize}: var(--plasma-typo-body-xs-font-size); - ${sliderTokens.valueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${sliderTokens.valueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${sliderTokens.valueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${sliderTokens.valueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${sliderTokens.valueFontFamily}: ${bodyXS.fontFamily}; + ${sliderTokens.valueFontSize}: ${bodyXS.fontSize}; + ${sliderTokens.valueFontStyle}: ${bodyXS.fontStyle}; + ${sliderTokens.valueFontWeight}: ${bodyXS.fontWeight}; + ${sliderTokens.valueLetterSpacing}: ${bodyXS.letterSpacing}; + ${sliderTokens.valueLineHeight}: ${bodyXS.lineHeight}; ${sliderTokens.thumbSize}: 1rem; ${sliderTokens.thumbSizeLarge}: 1.25rem; @@ -221,12 +238,12 @@ export const config = { ${sliderTokens.textFieldHeight}: 2.5rem; ${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem; ${sliderTokens.textFieldBorderRadius}: 0.625rem; - ${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${sliderTokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${sliderTokens.textFieldFontSize}: ${bodyS.fontSize}; + ${sliderTokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${sliderTokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${sliderTokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${sliderTokens.textFieldLineHeight}: ${bodyS.lineHeight}; `, }, disabled: { diff --git a/packages/sdds-serv/src/components/Steps/Steps.config.ts b/packages/sdds-serv/src/components/Steps/Steps.config.ts index ee1ee5e1e98..4e397229383 100644 --- a/packages/sdds-serv/src/components/Steps/Steps.config.ts +++ b/packages/sdds-serv/src/components/Steps/Steps.config.ts @@ -1,42 +1,72 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + onDarkTextPrimary, + onDarkTextPrimaryHover, + surfaceAccent, + surfaceAccentHover, + surfaceClear, + surfaceNegative, + surfaceNegativeHover, + surfacePositive, + surfacePositiveHover, + surfaceSolidDefault, + surfaceSolidDefaultHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryHover, + surfaceWarning, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textPrimaryHover, + textSecondary, + textSecondaryHover, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, stepsTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; const baseItemView = ` - ${tokens.activeTitleColor}: var(--text-primary); - ${tokens.activeTitleColorHover}: var(--text-primary-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-solid-default); - ${tokens.activeIndicatorColor}: var(--text-primary); - ${tokens.activeIndicatorBackground}: var(--surface-clear); + ${tokens.activeTitleColor}: ${textPrimary}; + ${tokens.activeTitleColorHover}: ${textPrimaryHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceSolidDefault}; + ${tokens.activeIndicatorColor}: ${textPrimary}; + ${tokens.activeIndicatorBackground}: ${surfaceClear}; - ${tokens.completedIndicatorColor}: var(--inverse-text-primary); - ${tokens.completedIndicatorColorHover}: var(--inverse-text-primary); - ${tokens.completedIndicatorBackground}: var(--surface-solid-default); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); - - ${tokens.inactiveTitleColor}: var(--text-secondary); - ${tokens.inactiveTitleColorHover}: var(--text-secondary-hover); - ${tokens.inactiveIndicatorColor}: var(--text-secondary); - ${tokens.inactiveIndicatorColorHover}: var(--text-secondary); - ${tokens.inactiveIndicatorBackground}: var(--surface-transparent-secondary); - ${tokens.inactiveIndicatorBackgroundHover}: var(--surface-transparent-secondary-hover); - - ${tokens.contentColor}: var(--text-secondary); - ${tokens.focusColor}: var(--surface-accent); + ${tokens.completedIndicatorColor}: ${inverseTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${inverseTextPrimary}; + ${tokens.completedIndicatorBackground}: ${surfaceSolidDefault}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; + + ${tokens.inactiveTitleColor}: ${textSecondary}; + ${tokens.inactiveTitleColorHover}: ${textSecondaryHover}; + ${tokens.inactiveIndicatorColor}: ${textSecondary}; + ${tokens.inactiveIndicatorColorHover}: ${textSecondary}; + ${tokens.inactiveIndicatorBackground}: ${surfaceTransparentSecondary}; + ${tokens.inactiveIndicatorBackgroundHover}: ${surfaceTransparentSecondaryHover}; + + ${tokens.contentColor}: ${textSecondary}; + ${tokens.focusColor}: ${surfaceAccent}; ${tokens.disabledOpacity}: 0.4; `; const accentConfig = ` - ${tokens.completedTitleColor}: var(--text-primary); - ${tokens.completedTitleColorHover}: var(--text-primary-hover); + ${tokens.completedTitleColor}: ${textPrimary}; + ${tokens.completedTitleColorHover}: ${textPrimaryHover}; - ${tokens.completedIndicatorBackground}: var(--surface-accent); - ${tokens.completedIndicatorBackgroundHover}: var(--surface-accent-hover); + ${tokens.completedIndicatorBackground}: ${surfaceAccent}; + ${tokens.completedIndicatorBackgroundHover}: ${surfaceAccentHover}; // Цвет контента внутри элемента Step - ${tokens.completedIndicatorColor}: var(--on-dark-text-primary); - ${tokens.completedIndicatorColorHover}: var(--on-dark-text-primary-hover); + ${tokens.completedIndicatorColor}: ${onDarkTextPrimary}; + ${tokens.completedIndicatorColorHover}: ${onDarkTextPrimaryHover}; `; export const config = { @@ -47,10 +77,10 @@ export const config = { variations: { view: { default: css` - ${tokens.dividerColor}: var(--surface-solid-default); + ${tokens.dividerColor}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.dividerColor}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceAccent}; `, }, itemView: { @@ -60,26 +90,26 @@ export const config = { negative: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-negative); - ${tokens.activeTitleColorHover}: var(--surface-negative-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-negative); - ${tokens.activeIndicatorColor}: var(--text-negative); + ${tokens.activeTitleColor}: ${surfaceNegative}; + ${tokens.activeTitleColorHover}: ${surfaceNegativeHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceNegative}; + ${tokens.activeIndicatorColor}: ${textNegative}; `, warning: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-warning); - ${tokens.activeTitleColorHover}: var(--surface-warning-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-warning); - ${tokens.activeIndicatorColor}: var(--text-warning); + ${tokens.activeTitleColor}: ${surfaceWarning}; + ${tokens.activeTitleColorHover}: ${surfaceWarningHover}; + ${tokens.activeIndicatorBorder}: solid ${surfaceWarning}; + ${tokens.activeIndicatorColor}: ${textWarning}; `, positive: css` ${baseItemView}; - ${tokens.activeTitleColor}: var(--surface-positive); - ${tokens.activeTitleColorHover}: var(--surface-positive-hover); - ${tokens.activeIndicatorBorder}: solid var(--surface-positive); - ${tokens.activeIndicatorColor}: var(--text-positive); + ${tokens.activeTitleColor}: ${surfacePositive}; + ${tokens.activeTitleColorHover}: ${surfacePositiveHover}; + ${tokens.activeIndicatorBorder}: solid ${surfacePositive}; + ${tokens.activeIndicatorColor}: ${textPositive}; `, }, size: { @@ -100,33 +130,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.5rem; ${tokens.largeBulletIndentHeight}: 1.25rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyL.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyM.fontFamily}; + ${tokens.contentFontSize}: ${bodyM.fontSize}; + ${tokens.contentFontStyle}: ${bodyM.fontStyle}; + ${tokens.contentFontWeight}: ${bodyM.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyM.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -147,33 +177,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1.25rem; ${tokens.largeBulletIndentHeight}: 1.125rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-m-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyM.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyS.fontFamily}; + ${tokens.contentFontSize}: ${bodyS.fontSize}; + ${tokens.contentFontStyle}: ${bodyS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -194,33 +224,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 1rem; ${tokens.largeBulletIndentHeight}: 0.75rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-s-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -241,33 +271,33 @@ export const config = { ${tokens.smallBulletIndentHeight}: 0.75rem; ${tokens.largeBulletIndentHeight}: 0.5rem; - ${tokens.indicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.indicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.indicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.indicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.indicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.indicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.activeIndicatorFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.activeIndicatorFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.activeIndicatorFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.activeIndicatorFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.activeIndicatorLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.activeIndicatorLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.titleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${tokens.contentFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.contentFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.contentFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.contentFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.contentLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.contentLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.indicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.indicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.indicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.indicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.indicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.indicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.activeIndicatorFontFamily}: ${bodyXS.fontFamily}; + ${tokens.activeIndicatorFontSize}: ${bodyXS.fontSize}; + ${tokens.activeIndicatorFontStyle}: ${bodyXS.fontStyle}; + ${tokens.activeIndicatorFontWeight}: ${bodyXS.fontWeight}; + ${tokens.activeIndicatorLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.activeIndicatorLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; + + ${tokens.contentFontFamily}: ${bodyXS.fontFamily}; + ${tokens.contentFontSize}: ${bodyXS.fontSize}; + ${tokens.contentFontStyle}: ${bodyXS.fontStyle}; + ${tokens.contentFontWeight}: ${bodyXS.fontWeight}; + ${tokens.contentLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.contentLineHeight}: ${bodyXS.lineHeight}; ${tokens.dividerThickness}: 0.125rem; `, @@ -278,8 +308,8 @@ export const config = { view: 'accent', itemView: 'default', style: css` - ${tokens.activeIndicatorBorder}: solid var(--text-accent); - ${tokens.activeIndicatorColor}: var(--text-accent); + ${tokens.activeIndicatorBorder}: solid ${textAccent}; + ${tokens.activeIndicatorColor}: ${textAccent}; ${accentConfig}; `, diff --git a/packages/sdds-serv/src/components/Switch/Switch.config.ts b/packages/sdds-serv/src/components/Switch/Switch.config.ts index 8a08bd686d8..d0025e03e9c 100644 --- a/packages/sdds-serv/src/components/Switch/Switch.config.ts +++ b/packages/sdds-serv/src/components/Switch/Switch.config.ts @@ -1,3 +1,16 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onDarkSurfaceSolidDefault, + surfaceAccent, + surfaceAccentHover, + surfaceTransparentTertiary, + surfaceTransparentTertiaryHover, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, switchTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -11,50 +24,50 @@ export const config = { variations: { size: { s: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-xs-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyS.fontFamily}; + ${switchTokens.fontStyle}: ${bodyS.fontStyle}; + ${switchTokens.fontWeight}: ${bodyS.fontWeight}; + ${switchTokens.lineHeight}: ${bodyS.lineHeight}; + ${switchTokens.fontSize}: ${bodyS.fontSize}; + ${switchTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyXS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyXS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyXS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyXS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyXS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, m: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-s-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-s-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-s-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-s-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-s-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyM.fontFamily}; + ${switchTokens.fontStyle}: ${bodyM.fontStyle}; + ${switchTokens.fontWeight}: ${bodyM.fontWeight}; + ${switchTokens.lineHeight}: ${bodyM.lineHeight}; + ${switchTokens.fontSize}: ${bodyM.fontSize}; + ${switchTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyS.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyS.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyS.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyS.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyS.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, l: css` - ${switchTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${switchTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${switchTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${switchTokens.lineHeight}: var(--plasma-typo-body-l-line-height); - ${switchTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${switchTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${switchTokens.descriptionFontFamily}: var(--plasma-typo-body-m-font-family); - ${switchTokens.descriptionFontStyle}: var(--plasma-typo-body-m-font-style); - ${switchTokens.descriptionFontWeight}: var(--plasma-typo-body-m-font-weight); - ${switchTokens.descriptionLineHeight}: var(--plasma-typo-body-m-line-height); - ${switchTokens.descriptionFontSize}: var(--plasma-typo-body-m-font-size); - ${switchTokens.descriptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${switchTokens.fontFamily}: ${bodyL.fontFamily}; + ${switchTokens.fontStyle}: ${bodyL.fontStyle}; + ${switchTokens.fontWeight}: ${bodyL.fontWeight}; + ${switchTokens.lineHeight}: ${bodyL.lineHeight}; + ${switchTokens.fontSize}: ${bodyL.fontSize}; + ${switchTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${switchTokens.descriptionFontFamily}: ${bodyM.fontFamily}; + ${switchTokens.descriptionFontStyle}: ${bodyM.fontStyle}; + ${switchTokens.descriptionFontWeight}: ${bodyM.fontWeight}; + ${switchTokens.descriptionLineHeight}: ${bodyM.lineHeight}; + ${switchTokens.descriptionFontSize}: ${bodyM.fontSize}; + ${switchTokens.descriptionLetterSpacing}: ${bodyXS.letterSpacing}; ${switchTokens.verticalGap}: 0.25rem; ${switchTokens.labelOffset}: 0.75rem; `, @@ -83,17 +96,17 @@ export const config = { }, view: { default: css` - ${switchTokens.labelColor}: var(--text-primary); - ${switchTokens.descriptionColor}: var(--text-secondary); + ${switchTokens.labelColor}: ${textPrimary}; + ${switchTokens.descriptionColor}: ${textSecondary}; ${switchTokens.descriptionMaxLines}: initial; - ${switchTokens.trackBackgroundColorOn}: var(--surface-accent); - ${switchTokens.trackBackgroundColorOnHover}: var(--surface-accent-hover); - ${switchTokens.trackBackgroundColorOff}: var(--surface-transparent-tertiary); - ${switchTokens.trackBackgroundColorOffHover}: var(--surface-transparent-tertiary-hover); + ${switchTokens.trackBackgroundColorOn}: ${surfaceAccent}; + ${switchTokens.trackBackgroundColorOnHover}: ${surfaceAccentHover}; + ${switchTokens.trackBackgroundColorOff}: ${surfaceTransparentTertiary}; + ${switchTokens.trackBackgroundColorOffHover}: ${surfaceTransparentTertiaryHover}; ${switchTokens.trackBorderWidthOn}: 0; ${switchTokens.trackBorderWidthOff}: 0; - ${switchTokens.thumbBackgroundColorOn}: var(--on-dark-surface-solid-default); - ${switchTokens.thumbBackgroundColorOff}: var(--on-dark-surface-solid-default); + ${switchTokens.thumbBackgroundColorOn}: ${onDarkSurfaceSolidDefault}; + ${switchTokens.thumbBackgroundColorOff}: ${onDarkSurfaceSolidDefault}; ${switchTokens.thumbBoxShadow}: 0 1px 1px rgba(0, 0, 0, 0.11); `, }, @@ -104,7 +117,7 @@ export const config = { }, focused: { true: css` - ${switchTokens.trackFocusColor}: var(--surface-accent); + ${switchTokens.trackFocusColor}: ${surfaceAccent}; `, }, }, diff --git a/packages/sdds-serv/src/components/Table/Table.config.ts b/packages/sdds-serv/src/components/Table/Table.config.ts index 770fa22b6d8..6786b878846 100644 --- a/packages/sdds-serv/src/components/Table/Table.config.ts +++ b/packages/sdds-serv/src/components/Table/Table.config.ts @@ -1,3 +1,15 @@ +import { + bodyL, + bodyM, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + onDarkTextPrimary, + surfaceTransparentTertiary, + textAccent, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tableTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +28,12 @@ export const config = { }, size: { l: css` - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.headerRowHeight}: 3.125rem; ${tokens.rowHeight}: 3.125rem; @@ -31,9 +43,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.5rem; ${tokens.editableCellIconButtonWidth}: 3rem; @@ -42,18 +54,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.875rem; ${tokens.editableCellInputPadding}: 0 0.75rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.75rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.buttonFontFamily}: ${bodyS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.875rem; @@ -63,12 +75,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyM.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyM.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyM.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyM.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyM.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -76,20 +88,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.5rem 0.875rem; ${tokens.selectControlPanelGap}: 0.5rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.linkButtonFontFamily}: ${bodyS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodySBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyS.lineHeight}; `, m: css` - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.headerRowHeight}: 2.75rem; ${tokens.rowHeight}: 2.75rem; @@ -99,9 +111,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 1.25rem; ${tokens.checkboxTriggerBorderRadius}: 0.375rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.375rem; ${tokens.editableCellIconButtonWidth}: 2.5rem; @@ -110,18 +122,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.625rem; ${tokens.editableCellInputPadding}: 0 0.625rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.375rem 0.75rem; ${tokens.buttonHeight}: 2rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.75rem; @@ -131,12 +143,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.375rem 0 0; ${tokens.selectItemIconSize}: 1.5rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 1.25rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.375rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -144,20 +156,20 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.75rem; ${tokens.selectControlPanelGap}: 0.625rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, s: css` - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.headerRowHeight}: 2.125rem; ${tokens.rowHeight}: 2.125rem; @@ -167,9 +179,9 @@ export const config = { ${tokens.checkboxTriggerBorderCheckedColor}: transparent; ${tokens.checkboxTriggerSize}: 0.875rem; ${tokens.checkboxTriggerBorderRadius}: 0.25rem; - ${tokens.checkboxTriggerBorderColor}: var(--text-secondary); - ${tokens.checkboxFillColor}: var(--text-accent); - ${tokens.checkboxTriggerIconColor}: var(--on-dark-text-primary); + ${tokens.checkboxTriggerBorderColor}: ${textSecondary}; + ${tokens.checkboxFillColor}: ${textAccent}; + ${tokens.checkboxTriggerIconColor}: ${onDarkTextPrimary}; ${tokens.editableCellIconGap}: 0.25rem; ${tokens.editableCellIconButtonWidth}: 2rem; @@ -178,18 +190,18 @@ export const config = { ${tokens.editableCellInputBorderRadius}: 0.5rem; ${tokens.editableCellInputPadding}: 0 0.375rem; - ${tokens.editableCellInputBackground}: var(--surface-transparent-tertiary); + ${tokens.editableCellInputBackground}: ${surfaceTransparentTertiary}; ${tokens.filterCheckboxPadding}: 0.5rem 0; ${tokens.filterDividerMargin}: 0.25rem 0.5rem; ${tokens.buttonHeight}: 1.5rem; - ${tokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.buttonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.buttonFontSize}: ${bodyXS.fontSize}; + ${tokens.buttonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.buttonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.buttonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.buttonLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectPadding}: 0.125rem; ${tokens.selectBorderRadius}: 0.625rem; @@ -199,12 +211,12 @@ export const config = { ${tokens.selectItemIconMargin}: 0 0.25rem 0 0; ${tokens.selectItemIconSize}: 1rem; ${tokens.selectCellPadding}: 0; - ${tokens.selectCellTitleFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.selectCellTitleFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.selectCellTitleFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.selectCellTitleFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.selectCellTitleLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.selectCellTitleLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.selectCellTitleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.selectCellTitleFontSize}: ${bodyXS.fontSize}; + ${tokens.selectCellTitleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.selectCellTitleFontWeight}: ${bodyXS.fontWeight}; + ${tokens.selectCellTitleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.selectCellTitleLineHeight}: ${bodyXS.lineHeight}; ${tokens.selectCheckboxTriggerSize}: 0.875rem; ${tokens.selectCheckboxTriggerBorderRadius}: 0.25rem; ${tokens.selectCheckboxTriggerBorderWidth}: 0.125rem; @@ -212,12 +224,12 @@ export const config = { ${tokens.selectControlPanelPadding}: 0.25rem 0.5rem; ${tokens.selectControlPanelGap}: 0.25rem; - ${tokens.linkButtonFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.linkButtonFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.linkButtonFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.linkButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tokens.linkButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.linkButtonLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.linkButtonFontFamily}: ${bodyXS.fontFamily}; + ${tokens.linkButtonFontSize}: ${bodyXS.fontSize}; + ${tokens.linkButtonFontStyle}: ${bodyXS.fontStyle}; + ${tokens.linkButtonFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.linkButtonLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.linkButtonLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts index 8b2e20b8ce7..2b9b12672fc 100644 --- a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts +++ b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalIconTabItem.config.ts @@ -1,3 +1,13 @@ +import { + inverseTextPrimary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,78 +18,78 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); + ${tabsTokens.itemColor}: ${textPrimary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0; diff --git a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index f70368f502f..293c6053c66 100644 --- a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + h1, + h2, + h3, + h4, + h5, + h6, + inverseTextPrimary, + inverseTextSecondary, + surfaceAccent, + surfaceSolidCard, + surfaceSolidDefault, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,106 +34,106 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, secondary: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-card); - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-card); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidCard}; + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidCard}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, default: css` - ${tabsTokens.itemColor}: var(--text-primary); - ${tabsTokens.itemValueColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textPrimary}; + ${tabsTokens.itemValueColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColor}: var(--surface-solid-default); - ${tabsTokens.itemSelectedColorHover}: var(--inverse-text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--inverse-text-secondary); - ${tabsTokens.itemSelectedBackgroundColorHover}: var(--surface-solid-default); + ${tabsTokens.itemSelectedColor}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColor}: ${surfaceSolidDefault}; + ${tabsTokens.itemSelectedColorHover}: ${inverseTextPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${inverseTextSecondary}; + ${tabsTokens.itemSelectedBackgroundColorHover}: ${surfaceSolidDefault}; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemMarginLeftFilled}: 0.125rem; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerHeight}: 0rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -123,12 +149,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -142,12 +168,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -161,12 +187,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -180,12 +206,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -197,12 +223,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h6-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h6-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h6-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h6-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h6-line-height); + ${tabsTokens.fontFamily}: ${h6.fontFamily}; + ${tabsTokens.fontSize}: ${h6.fontSize}; + ${tabsTokens.fontStyle}: ${h6.fontStyle}; + ${tabsTokens.fontWeight}: ${h6.fontWeight}; + ${tabsTokens.letterSpacing}: ${h6.letterSpacing}; + ${tabsTokens.lineHeight}: ${h6.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -214,12 +240,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.5rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h5-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h5-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h5-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h5-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h5-line-height); + ${tabsTokens.fontFamily}: ${h5.fontFamily}; + ${tabsTokens.fontSize}: ${h5.fontSize}; + ${tabsTokens.fontStyle}: ${h5.fontStyle}; + ${tabsTokens.fontWeight}: ${h5.fontWeight}; + ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; + ${tabsTokens.lineHeight}: ${h5.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -231,12 +257,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 1.75rem; ${tabsTokens.itemContentGap}: 0.625rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h4-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h4-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h4-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h4-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h4-line-height); + ${tabsTokens.fontFamily}: ${h4.fontFamily}; + ${tabsTokens.fontSize}: ${h4.fontSize}; + ${tabsTokens.fontStyle}: ${h4.fontStyle}; + ${tabsTokens.fontWeight}: ${h4.fontWeight}; + ${tabsTokens.letterSpacing}: ${h4.letterSpacing}; + ${tabsTokens.lineHeight}: ${h4.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -248,12 +274,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2rem; ${tabsTokens.itemContentGap}: 0.75rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h3-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h3-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h3-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h3-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h3-line-height); + ${tabsTokens.fontFamily}: ${h3.fontFamily}; + ${tabsTokens.fontSize}: ${h3.fontSize}; + ${tabsTokens.fontStyle}: ${h3.fontStyle}; + ${tabsTokens.fontWeight}: ${h3.fontWeight}; + ${tabsTokens.letterSpacing}: ${h3.letterSpacing}; + ${tabsTokens.lineHeight}: ${h3.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -265,12 +291,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 2.25rem; ${tabsTokens.itemContentGap}: 0.875rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h2-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h2-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h2-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h2-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h2-line-height); + ${tabsTokens.fontFamily}: ${h2.fontFamily}; + ${tabsTokens.fontSize}: ${h2.fontSize}; + ${tabsTokens.fontStyle}: ${h2.fontStyle}; + ${tabsTokens.fontWeight}: ${h2.fontWeight}; + ${tabsTokens.letterSpacing}: ${h2.letterSpacing}; + ${tabsTokens.lineHeight}: ${h2.lineHeight}; ${tabsTokens.actionContentMarginLeft}: -0.125rem; `, @@ -282,12 +308,12 @@ export const config = { ${tabsTokens.itemMarginLeft}: 3.25rem; ${tabsTokens.itemContentGap}: 1rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-h1-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-h1-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-h1-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-h1-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-h1-line-height); + ${tabsTokens.fontFamily}: ${h1.fontFamily}; + ${tabsTokens.fontSize}: ${h1.fontSize}; + ${tabsTokens.fontStyle}: ${h1.fontStyle}; + ${tabsTokens.fontWeight}: ${h1.fontWeight}; + ${tabsTokens.letterSpacing}: ${h1.letterSpacing}; + ${tabsTokens.lineHeight}: ${h1.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, diff --git a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabs.config.ts b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabs.config.ts index bc3e5edf5c1..e8f25e21954 100644 --- a/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabs.config.ts +++ b/packages/sdds-serv/src/components/Tabs/horizontal/HorizontalTabs.config.ts @@ -1,3 +1,11 @@ +import { + surfaceAccent, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,36 +16,36 @@ export const config = { variations: { view: { clear: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, filled: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); - ${tabsTokens.tabsBackgroundColor}: var(--surface-transparent-primary); - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; + ${tabsTokens.tabsBackgroundColor}: ${surfaceTransparentPrimary}; + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0rem; ${tabsTokens.tabsDividerColor}: transparent; ${tabsTokens.tabsDividerBorderRadius}: 0rem; `, divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-serv/src/components/Tabs/vertical/VerticalIconTabItem.config.ts b/packages/sdds-serv/src/components/Tabs/vertical/VerticalIconTabItem.config.ts index c1b4b62e4a1..c8b864479eb 100644 --- a/packages/sdds-serv/src/components/Tabs/vertical/VerticalIconTabItem.config.ts +++ b/packages/sdds-serv/src/components/Tabs/vertical/VerticalIconTabItem.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,22 +15,22 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); + ${tabsTokens.itemColor}: ${textSecondary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, diff --git a/packages/sdds-serv/src/components/Tabs/vertical/VerticalTabItem.config.ts b/packages/sdds-serv/src/components/Tabs/vertical/VerticalTabItem.config.ts index c819eeeacbd..3ac4be1e321 100644 --- a/packages/sdds-serv/src/components/Tabs/vertical/VerticalTabItem.config.ts +++ b/packages/sdds-serv/src/components/Tabs/vertical/VerticalTabItem.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, + surfaceAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,31 +24,31 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.itemColor}: var(--text-secondary); - ${tabsTokens.itemValueColor}: var(--text-tertiary); + ${tabsTokens.itemColor}: ${textSecondary}; + ${tabsTokens.itemValueColor}: ${textTertiary}; ${tabsTokens.itemBackgroundColor}: transparent; - ${tabsTokens.itemColorHover}: var(--text-secondary-hover); - ${tabsTokens.itemValueColorHover}: var(--text-secondary); - ${tabsTokens.itemColorActive}: var(--text-secondary-active); - ${tabsTokens.itemValueColorActive}: var(--text-secondary); + ${tabsTokens.itemColorHover}: ${textSecondaryHover}; + ${tabsTokens.itemValueColorHover}: ${textSecondary}; + ${tabsTokens.itemColorActive}: ${textSecondaryActive}; + ${tabsTokens.itemValueColorActive}: ${textSecondary}; ${tabsTokens.itemBackgroundColorHover}: transparent; - ${tabsTokens.itemSelectedColor}: var(--text-primary); - ${tabsTokens.itemSelectedValueColor}: var(--text-secondary); + ${tabsTokens.itemSelectedColor}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColor}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColor}: transparent; - ${tabsTokens.itemSelectedColorHover}: var(--text-primary); - ${tabsTokens.itemSelectedValueColorHover}: var(--text-secondary); + ${tabsTokens.itemSelectedColorHover}: ${textPrimary}; + ${tabsTokens.itemSelectedValueColorHover}: ${textSecondary}; ${tabsTokens.itemSelectedBackgroundColorHover}: transparent; ${tabsTokens.itemBackgroundTransition}: background-color 0.3s ease-in-out; ${tabsTokens.itemPaddingClear}: 0; ${tabsTokens.itemContentPaddingClear}: 0; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.itemSelectedDividerWidth}: 0.125rem; ${tabsTokens.itemSelectedDividerHeight}: 0.125rem; - ${tabsTokens.itemSelectedDividerColor}: var(--text-primary); - ${tabsTokens.itemSelectedDividerColorHover}: var(--text-primary); + ${tabsTokens.itemSelectedDividerColor}: ${textPrimary}; + ${tabsTokens.itemSelectedDividerColorHover}: ${textPrimary}; ${tabsTokens.itemCursor}: pointer; `, @@ -49,12 +65,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-xs-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tabsTokens.fontFamily}: ${bodyXS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyXS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyXS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyXSBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyXS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0; `, @@ -69,12 +85,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.25rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-s-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tabsTokens.fontFamily}: ${bodyS.fontFamily}; + ${tabsTokens.fontSize}: ${bodyS.fontSize}; + ${tabsTokens.fontStyle}: ${bodyS.fontStyle}; + ${tabsTokens.fontWeight}: ${bodySBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyS.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.25rem; `, @@ -89,12 +105,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.375rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-m-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tabsTokens.fontFamily}: ${bodyM.fontFamily}; + ${tabsTokens.fontSize}: ${bodyM.fontSize}; + ${tabsTokens.fontStyle}: ${bodyM.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyM.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, @@ -109,12 +125,12 @@ export const config = { ${tabsTokens.itemContentGap}: 0.5rem; ${tabsTokens.itemContentPadding}: 0.125rem; - ${tabsTokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tabsTokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tabsTokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tabsTokens.fontWeight}: var(--plasma-typo-body-l-bold-font-weight); - ${tabsTokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tabsTokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tabsTokens.fontFamily}: ${bodyL.fontFamily}; + ${tabsTokens.fontSize}: ${bodyL.fontSize}; + ${tabsTokens.fontStyle}: ${bodyL.fontStyle}; + ${tabsTokens.fontWeight}: ${bodyLBold.fontWeight}; + ${tabsTokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tabsTokens.lineHeight}: ${bodyL.lineHeight}; ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, diff --git a/packages/sdds-serv/src/components/Tabs/vertical/VerticalTabs.config.ts b/packages/sdds-serv/src/components/Tabs/vertical/VerticalTabs.config.ts index 78eba3f047c..dca88d1b56f 100644 --- a/packages/sdds-serv/src/components/Tabs/vertical/VerticalTabs.config.ts +++ b/packages/sdds-serv/src/components/Tabs/vertical/VerticalTabs.config.ts @@ -1,3 +1,10 @@ +import { + surfaceAccent, + surfaceTransparentTertiary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tabsTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,15 +15,15 @@ export const config = { variations: { view: { divider: css` - ${tabsTokens.arrowColor}: var(--text-secondary); - ${tabsTokens.arrowColorHover}: var(--text-secondary-hover); - ${tabsTokens.arrowColorActive}: var(---text-secondary-active); + ${tabsTokens.arrowColor}: ${textSecondary}; + ${tabsTokens.arrowColorHover}: ${textSecondaryHover}; + ${tabsTokens.arrowColorActive}: ${textSecondaryActive}; ${tabsTokens.tabsBackgroundColor}: transparent; - ${tabsTokens.outlineFocusColor}: var(--surface-accent); + ${tabsTokens.outlineFocusColor}: ${surfaceAccent}; ${tabsTokens.tabsDividerWidth}: 0.0625rem; ${tabsTokens.tabsDividerHeight}: 0.0625rem; - ${tabsTokens.tabsDividerColor}: var(--surface-transparent-tertiary); + ${tabsTokens.tabsDividerColor}: ${surfaceTransparentTertiary}; ${tabsTokens.tabsDividerBorderRadius}: 0.0625rem; `, }, diff --git a/packages/sdds-serv/src/components/TextArea/TextArea.clear.config.ts b/packages/sdds-serv/src/components/TextArea/TextArea.clear.config.ts index 87abb38a0d7..f6d221b6c73 100644 --- a/packages/sdds-serv/src/components/TextArea/TextArea.clear.config.ts +++ b/packages/sdds-serv/src/components/TextArea/TextArea.clear.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentPrimary, + surfaceTransparentTertiary, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -19,31 +42,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` ${tokens.inputBackgroundColor}: transparent; @@ -56,31 +79,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-positive); - ${tokens.inputColorFocus}: var(--text-positive); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textPositive}; + ${tokens.inputColorFocus}: ${textPositive}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` ${tokens.inputBackgroundColor}: transparent; @@ -93,31 +116,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-warning); - ${tokens.inputColorFocus}: var(--text-warning); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textWarning}; + ${tokens.inputColorFocus}: ${textWarning}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` ${tokens.inputBackgroundColor}: transparent; @@ -130,31 +153,31 @@ export const config = { ${tokens.helpersBackgroundColorActive}: transparent; ${tokens.helpersBackgroundColorFocus}: transparent; - ${tokens.inputColor}: var(--text-negative); - ${tokens.inputColorFocus}: var(--text-negative); - ${tokens.inputCaretColor}: var(--text-accent); + ${tokens.inputColor}: ${textNegative}; + ${tokens.inputColorFocus}: ${textNegative}; + ${tokens.inputCaretColor}: ${textAccent}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textTertiary}; - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelOuterColor}: var(--text-primary); + ${tokens.labelOuterColor}: ${textPrimary}; - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -184,30 +207,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -225,12 +248,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -258,30 +281,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -299,12 +322,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -332,30 +355,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -373,12 +396,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -406,30 +429,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -447,12 +470,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -480,30 +503,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.25rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -521,24 +544,24 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; ${tokens.tooltipBoxShadow}: var( --shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08) ); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -551,12 +574,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -575,12 +598,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -598,9 +621,9 @@ export const config = { }, readOnly: { true: css` - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-serv/src/components/TextArea/TextArea.config.ts b/packages/sdds-serv/src/components/TextArea/TextArea.config.ts index 9a056369045..023753e0cef 100644 --- a/packages/sdds-serv/src/components/TextArea/TextArea.config.ts +++ b/packages/sdds-serv/src/components/TextArea/TextArea.config.ts @@ -1,3 +1,41 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + bodyXXS, + shadowDownHardM, + surfaceAccent, + surfaceNegative, + surfacePositive, + surfaceSolidCardBrightness, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentTertiaryActive, + surfaceTransparentTertiaryHover, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, textAreaTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,172 +46,172 @@ export const config = { variations: { view: { default: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-primary); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-primary); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-secondary); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-accent); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentSecondary}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textAccent}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, positive: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-positive); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-positive); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-positive-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-positive); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-positive); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentPositiveActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentPositive}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textPositive}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, warning: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-warning); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-warning); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-warning-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-warning); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-warning); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentWarningActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentWarning}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textWarning}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, negative: css` - ${tokens.inputBackgroundColor}: var(--surface-transparent-negative); - ${tokens.inputBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.inputBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.inputBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.helpersBackgroundColor}: var(--surface-transparent-negative); - ${tokens.helpersBackgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.helpersBackgroundColorActive}: var(--surface-transparent-negative-active); - ${tokens.helpersBackgroundColorFocus}: var(--surface-transparent-negative); - - ${tokens.inputColor}: var(--text-primary); - ${tokens.inputColorFocus}: var(--text-primary); - ${tokens.inputCaretColor}: var(--text-negative); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.rightHelperColor}: var(--text-secondary); - - ${tokens.rightContentColor}: var(--text-secondary); - ${tokens.rightContentColorHover}: var(--text-secondary-hover); - ${tokens.rightContentColorActive}: var(--text-secondary-active); - - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); - - ${tokens.scrollbarThumbBackgroundColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarThumbBackgroundColorHover}: var(--surface-transparent-tertiary-hover); - ${tokens.scrollbarThumbBackgroundColorActive}: var(--surface-transparent-tertiary-active); - ${tokens.scrollbarTrackBackgroundColor}: var(--surface-transparent-primary); - ${tokens.scrollbarTrackBackgroundColorActive}: var(--surface-transparent-primary-active); - ${tokens.scrollbarTrackBackgroundColorHover}: var(--surface-transparent-primary-hover); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); + ${tokens.inputBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.inputBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.inputBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.inputBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.helpersBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.helpersBackgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.helpersBackgroundColorActive}: ${surfaceTransparentNegativeActive}; + ${tokens.helpersBackgroundColorFocus}: ${surfaceTransparentNegative}; + + ${tokens.inputColor}: ${textPrimary}; + ${tokens.inputColorFocus}: ${textPrimary}; + ${tokens.inputCaretColor}: ${textNegative}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.rightHelperColor}: ${textSecondary}; + + ${tokens.rightContentColor}: ${textSecondary}; + ${tokens.rightContentColorHover}: ${textSecondaryHover}; + ${tokens.rightContentColorActive}: ${textSecondaryActive}; + + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; + + ${tokens.scrollbarThumbBackgroundColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarThumbBackgroundColorHover}: ${surfaceTransparentTertiaryHover}; + ${tokens.scrollbarThumbBackgroundColorActive}: ${surfaceTransparentTertiaryActive}; + ${tokens.scrollbarTrackBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.scrollbarTrackBackgroundColorActive}: ${surfaceTransparentPrimaryActive}; + ${tokens.scrollbarTrackBackgroundColorHover}: ${surfaceTransparentPrimaryHover}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; `, }, size: { @@ -202,30 +240,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.813rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.25rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -243,12 +281,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.751rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.inputWidth}: 100%; @@ -275,30 +313,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.75rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.5625rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.inputFontFamily}: ${bodyL.fontFamily}; + ${tokens.inputFontSize}: ${bodyL.fontSize}; + ${tokens.inputFontStyle}: ${bodyL.fontStyle}; + ${tokens.inputFontWeight}: ${bodyL.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyL.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -316,12 +354,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.inputWidth}: 100%; @@ -348,30 +386,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.625rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.inputFontFamily}: ${bodyM.fontFamily}; + ${tokens.inputFontSize}: ${bodyM.fontSize}; + ${tokens.inputFontStyle}: ${bodyM.fontStyle}; + ${tokens.inputFontWeight}: ${bodyM.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyM.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -391,12 +429,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.813rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.inputWidth}: 100%; @@ -423,30 +461,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.5rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerTop}: 0.375rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0.125rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.inputFontFamily}: ${bodyS.fontFamily}; + ${tokens.inputFontSize}: ${bodyS.fontSize}; + ${tokens.inputFontStyle}: ${bodyS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -464,12 +502,12 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.688rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.inputWidth}: 100%; @@ -496,30 +534,30 @@ export const config = { ${tokens.labelMarginBottom}: 0.375rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXXS.lineHeight}; ${tokens.labelInnerTop}: 0rem; ${tokens.labelInnerTopHelper}: -0.313rem; ${tokens.labelInnerMarginBottom}: 0rem; - ${tokens.inputFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.inputFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.inputFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.inputFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.inputLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.inputLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.inputFontFamily}: ${bodyXS.fontFamily}; + ${tokens.inputFontSize}: ${bodyXS.fontSize}; + ${tokens.inputFontStyle}: ${bodyXS.fontStyle}; + ${tokens.inputFontWeight}: ${bodyXS.fontWeight}; + ${tokens.inputLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.inputLineHeight}: ${bodyXS.lineHeight}; - ${tokens.helpersFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.helpersFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.helpersFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.helpersFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.helpersLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.helpersLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.helpersFontFamily}: ${bodyXS.fontFamily}; + ${tokens.helpersFontSize}: ${bodyXS.fontSize}; + ${tokens.helpersFontStyle}: ${bodyXS.fontStyle}; + ${tokens.helpersFontWeight}: ${bodyXS.fontWeight}; + ${tokens.helpersLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.helpersLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -537,20 +575,20 @@ export const config = { ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16), 0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -563,12 +601,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -587,12 +625,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -606,18 +644,18 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.inputColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.inputColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, disabled: { true: css` ${tokens.disabledOpacity}: 0.4; - ${tokens.inputColorDisabled}: var(--text-secondary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); + ${tokens.inputColorDisabled}: ${textSecondary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-serv/src/components/TextField/TextField.clear.config.ts b/packages/sdds-serv/src/components/TextField/TextField.clear.config.ts index 31d1a8122e8..2b4e6430ca8 100644 --- a/packages/sdds-serv/src/components/TextField/TextField.clear.config.ts +++ b/packages/sdds-serv/src/components/TextField/TextField.clear.config.ts @@ -1,3 +1,52 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textNegativeActive, + textNegativeHover, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, + textWarningActive, + textWarningHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,132 +58,132 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); + ${tokens.color}: ${textPrimary}; - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-positive); + ${tokens.color}: ${textPositive}; - ${tokens.placeholderColor}: var(--text-positive); - ${tokens.placeholderColorFocus}: var(--text-positive); + ${tokens.placeholderColor}: ${textPositive}; + ${tokens.placeholderColorFocus}: ${textPositive}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-positive); - ${tokens.contentSlotColorHover}: var(--text-positive-hover); - ${tokens.contentSlotColorActive}: var(--text-positive-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textPositive}; + ${tokens.contentSlotColorHover}: ${textPositiveHover}; + ${tokens.contentSlotColorActive}: ${textPositiveActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-warning); + ${tokens.color}: ${textWarning}; - ${tokens.placeholderColor}: var(--text-warning); - ${tokens.placeholderColorFocus}: var(--text-warning); + ${tokens.placeholderColor}: ${textWarning}; + ${tokens.placeholderColorFocus}: ${textWarning}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-warning); - ${tokens.contentSlotColorHover}: var(--text-warning-hover); - ${tokens.contentSlotColorActive}: var(--text-warning-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textWarning}; + ${tokens.contentSlotColorHover}: ${textWarningHover}; + ${tokens.contentSlotColorActive}: ${textWarningActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-negative); + ${tokens.color}: ${textNegative}; - ${tokens.placeholderColor}: var(--text-negative); - ${tokens.placeholderColorFocus}: var(--text-negative); + ${tokens.placeholderColor}: ${textNegative}; + ${tokens.placeholderColorFocus}: ${textNegative}; ${tokens.backgroundColor}: transparent; ${tokens.backgroundColorHover}: transparent; ${tokens.backgroundColorFocus}: transparent; - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-negative); - ${tokens.contentSlotColorHover}: var(--text-negative-hover); - ${tokens.contentSlotColorActive}: var(--text-negative-active); - - ${tokens.contentSlotRightColor}: var(--text-secondary); - ${tokens.contentSlotRightColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotRightColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textNegative}; + ${tokens.contentSlotColorHover}: ${textNegativeHover}; + ${tokens.contentSlotColorActive}: ${textNegativeActive}; + + ${tokens.contentSlotRightColor}: ${textSecondary}; + ${tokens.contentSlotRightColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotRightColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -151,40 +200,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.063rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -200,19 +249,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -235,40 +284,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -283,12 +332,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -311,40 +360,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -359,12 +408,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -387,40 +436,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -435,12 +484,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -463,40 +512,40 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -511,12 +560,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -529,126 +578,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -661,12 +710,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -685,12 +734,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -709,13 +758,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); + ${tokens.colorReadOnly}: ${textPrimary}; ${tokens.backgroundColorReadOnly}: transparent; - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-serv/src/components/TextField/TextField.config.ts b/packages/sdds-serv/src/components/TextField/TextField.config.ts index c029fa0c4a6..9eebaa2c9b3 100644 --- a/packages/sdds-serv/src/components/TextField/TextField.config.ts +++ b/packages/sdds-serv/src/components/TextField/TextField.config.ts @@ -1,3 +1,56 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + inverseTextPrimary, + inverseTextSecondary, + inverseTextSecondaryHover, + onDarkTextPrimary, + onDarkTextSecondary, + onDarkTextSecondaryHover, + shadowDownHardM, + surfaceAccent, + surfaceAccentActive, + surfaceAccentHover, + surfaceNegative, + surfaceNegativeActive, + surfaceNegativeHover, + surfacePositive, + surfacePositiveActive, + surfacePositiveHover, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidDefaultActive, + surfaceSolidDefaultHover, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentNegativeHover, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPositiveHover, + surfaceTransparentPrimary, + surfaceTransparentPrimaryHover, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + surfaceTransparentWarningHover, + surfaceWarning, + surfaceWarningActive, + surfaceWarningHover, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, + textWarning, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, textFieldTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,120 +62,120 @@ export const config = { variations: { view: { default: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-primary); - ${tokens.backgroundColorHover}: var(--surface-transparent-primary-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-transparent-tertiary); - ${tokens.dividerColorHover}: var(--text-secondary); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPrimaryHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceTransparentTertiary}; + ${tokens.dividerColorHover}: ${textSecondary}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, positive: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-positive); - ${tokens.backgroundColorHover}: var(--surface-transparent-positive-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-positive-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-positive); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-positive); - ${tokens.dividerColorHover}: var(--surface-positive); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentPositive}; + ${tokens.backgroundColorHover}: ${surfaceTransparentPositiveHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentPositiveActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textPositive}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfacePositive}; + ${tokens.dividerColorHover}: ${surfacePositive}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, warning: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-warning); - ${tokens.backgroundColorHover}: var(--surface-transparent-warning-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-warning-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-warning); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-warning); - ${tokens.dividerColorHover}: var(--surface-warning); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentWarning}; + ${tokens.backgroundColorHover}: ${surfaceTransparentWarningHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentWarningActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textWarning}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceWarning}; + ${tokens.dividerColorHover}: ${surfaceWarning}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, negative: css` - ${tokens.color}: var(--text-primary); - - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.placeholderColorFocus}: var(--text-tertiary); - - ${tokens.backgroundColor}: var(--surface-transparent-negative); - ${tokens.backgroundColorHover}: var(--surface-transparent-negative-hover); - ${tokens.backgroundColorFocus}: var(--surface-transparent-negative-active); - ${tokens.caretColor}: var(--text-accent); - ${tokens.textBeforeColor}: var(--text-tertiary); - ${tokens.textAfterColor}: var(--text-tertiary); - ${tokens.labelColor}: var(--text-primary); - ${tokens.leftHelperColor}: var(--text-negative); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.hintIconColor}: var(--text-secondary); - - ${tokens.contentSlotColor}: var(--text-secondary); - ${tokens.contentSlotColorHover}: var(--text-secondary-hover); - ${tokens.contentSlotColorActive}: var(--text-secondary-active); - - ${tokens.dividerColor}: var(--surface-negative); - ${tokens.dividerColorHover}: var(--surface-negative); - ${tokens.dividerColorFocus}: var(--surface-accent); - - ${tokens.focusColor}: var(--text-accent); - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.color}: ${textPrimary}; + + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.placeholderColorFocus}: ${textTertiary}; + + ${tokens.backgroundColor}: ${surfaceTransparentNegative}; + ${tokens.backgroundColorHover}: ${surfaceTransparentNegativeHover}; + ${tokens.backgroundColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.caretColor}: ${textAccent}; + ${tokens.textBeforeColor}: ${textTertiary}; + ${tokens.textAfterColor}: ${textTertiary}; + ${tokens.labelColor}: ${textPrimary}; + ${tokens.leftHelperColor}: ${textNegative}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.hintIconColor}: ${textSecondary}; + + ${tokens.contentSlotColor}: ${textSecondary}; + ${tokens.contentSlotColorHover}: ${textSecondaryHover}; + ${tokens.contentSlotColorActive}: ${textSecondaryActive}; + + ${tokens.dividerColor}: ${surfaceNegative}; + ${tokens.dividerColorHover}: ${surfaceNegative}; + ${tokens.dividerColorFocus}: ${surfaceAccent}; + + ${tokens.focusColor}: ${textAccent}; + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.optionalColor}: ${textTertiary}; `, }, size: { @@ -135,40 +188,40 @@ export const config = { ${tokens.leftContentMargin}: -0.0625rem 0.5rem -0.0625rem 0rem; ${tokens.rightContentMargin}: -0.0625rem 0rem -0.0625rem 0.75rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.82rem -2.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; @@ -184,19 +237,19 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); - - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; + + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -219,20 +272,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -240,20 +293,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.563rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -266,12 +319,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -297,20 +350,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -318,20 +371,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.312rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -344,12 +397,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSizeInner}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -375,20 +428,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.438rem -0.438rem -0.438rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -396,20 +449,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: 0.062rem -2.188rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -422,12 +475,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -453,20 +506,20 @@ export const config = { ${tokens.contentRightWrapperGap}: 0.25rem; ${tokens.contentRightWrapperMargin}: -0.688rem -0.688rem -0.688rem 0; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; @@ -474,20 +527,20 @@ export const config = { ${tokens.clearHintInnerLabelPlacementOffset}: -0.188rem -1.938rem auto auto; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -500,12 +553,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSizeInner}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -520,126 +573,126 @@ export const config = { }, labelPlacement: { inner: css` - ${tokens.placeholderColor}: var(--text-secondary); - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.placeholderColor}: ${textSecondary}; + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; `, outer: css``, }, chipView: { default: css` - ${tokens.chipColor}: var(--inverse-text-primary); - ${tokens.chipBackground}: var(--surface-solid-default); - ${tokens.chipColorHover}: var(--inverse-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-solid-default-hover); - ${tokens.chipColorActive}: var(--inverse-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-solid-default-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-solid-default); - ${tokens.chipColorReadOnly}: var(--inverse-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-solid-default); - ${tokens.chipColorReadOnlyHover}: var(--inverse-text-primary); - - ${tokens.chipCloseIconColor}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--inverse-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--inverse-text-secondary-hover); + ${tokens.chipColor}: ${inverseTextPrimary}; + ${tokens.chipBackground}: ${surfaceSolidDefault}; + ${tokens.chipColorHover}: ${inverseTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceSolidDefaultHover}; + ${tokens.chipColorActive}: ${inverseTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceSolidDefaultActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnly}: ${inverseTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceSolidDefault}; + ${tokens.chipColorReadOnlyHover}: ${inverseTextPrimary}; + + ${tokens.chipCloseIconColor}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${inverseTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${inverseTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, secondary: css` - ${tokens.chipColor}: var(--text-primary); - ${tokens.chipBackground}: var(--surface-transparent-secondary); - ${tokens.chipColorHover}: var(--text-primary); - ${tokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${tokens.chipColorActive}: var(--text-primary); - ${tokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnly}: var(--text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${tokens.chipColorReadOnlyHover}: var(--text-primary); - - ${tokens.chipCloseIconColor}: var(--text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--text-secondary); - ${tokens.chipCloseIconColorHover}: var(--text-secondary-hover); + ${tokens.chipColor}: ${textPrimary}; + ${tokens.chipBackground}: ${surfaceTransparentSecondary}; + ${tokens.chipColorHover}: ${textPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.chipColorActive}: ${textPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnly}: ${textPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceTransparentSecondary}; + ${tokens.chipColorReadOnlyHover}: ${textPrimary}; + + ${tokens.chipCloseIconColor}: ${textSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${textSecondary}; + ${tokens.chipCloseIconColorHover}: ${textSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, accent: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-accent); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-accent-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-accent-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-accent); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-accent); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceAccent}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceAccentHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceAccentActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceAccent}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceAccent}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, positive: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-positive); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-positive-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-positive-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-positive); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-positive); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfacePositive}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfacePositiveHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfacePositiveActive}; + ${tokens.chipBackgroundReadOnly}: ${surfacePositive}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfacePositive}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, warning: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-warning); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-warning-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-warning-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-warning); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-warning); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceWarning}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceWarningHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceWarningActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceWarning}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceWarning}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, negative: css` - ${tokens.chipColor}: var(--on-dark-text-primary); - ${tokens.chipBackground}: var(--surface-negative); - ${tokens.chipColorHover}: var(--on-dark-text-primary); - ${tokens.chipBackgroundHover}: var(--surface-negative-hover); - ${tokens.chipColorActive}: var(--on-dark-text-primary); - ${tokens.chipBackgroundActive}: var(--surface-negative-active); - ${tokens.chipBackgroundReadOnly}: var(--surface-negative); - ${tokens.chipColorReadOnly}: var(--on-dark-text-primary); - ${tokens.chipBackgroundReadOnlyHover}: var(--surface-negative); - ${tokens.chipColorReadOnlyHover}: var(--on-dark-text-primary); - - ${tokens.chipCloseIconColor}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorReadonly}: var(--on-dark-text-secondary); - ${tokens.chipCloseIconColorHover}: var(--on-dark-text-secondary-hover); + ${tokens.chipColor}: ${onDarkTextPrimary}; + ${tokens.chipBackground}: ${surfaceNegative}; + ${tokens.chipColorHover}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundHover}: ${surfaceNegativeHover}; + ${tokens.chipColorActive}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundActive}: ${surfaceNegativeActive}; + ${tokens.chipBackgroundReadOnly}: ${surfaceNegative}; + ${tokens.chipColorReadOnly}: ${onDarkTextPrimary}; + ${tokens.chipBackgroundReadOnlyHover}: ${surfaceNegative}; + ${tokens.chipColorReadOnlyHover}: ${onDarkTextPrimary}; + + ${tokens.chipCloseIconColor}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorReadonly}: ${onDarkTextSecondary}; + ${tokens.chipCloseIconColorHover}: ${onDarkTextSecondaryHover}; ${tokens.chipOpacityReadonly}: 1; `, }, hintView: { default: css` - ${tokens.tooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.tooltipBoxShadow}: var(--shadow-down-hard-m, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); - ${tokens.tooltipColor}: var(--text-primary); - ${tokens.tooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.tooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.tooltipBoxShadow}: ${shadowDownHardM}, 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08)); + ${tokens.tooltipColor}: ${textPrimary}; + ${tokens.tooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -652,12 +705,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2.5rem; ${tokens.tooltipBorderRadius}: 0.625rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.375rem; @@ -676,12 +729,12 @@ export const config = { ${tokens.tooltipMinHeight}: 2rem; ${tokens.tooltipBorderRadius}: 0.5rem; - ${tokens.tooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.tooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.tooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.tooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.tooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.tooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.tooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.tooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.tooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.tooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.tooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.tooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.tooltipContentLeftMargin}: 0.25rem; @@ -700,13 +753,13 @@ export const config = { readOnly: { true: css` ${tokens.readOnlyOpacity}: 0.1; - ${tokens.colorReadOnly}: var(--text-primary); - ${tokens.backgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.placeholderColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); - ${tokens.titleCaptionColorReadOnly}: var(--text-secondary); - ${tokens.labelColorReadOnly}: var(--text-primary); - ${tokens.dividerColorReadOnly}: var(--surface-transparent-primary); + ${tokens.colorReadOnly}: ${textPrimary}; + ${tokens.backgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.placeholderColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; + ${tokens.titleCaptionColorReadOnly}: ${textSecondary}; + ${tokens.labelColorReadOnly}: ${textPrimary}; + ${tokens.dividerColorReadOnly}: ${surfaceTransparentPrimary}; ${tokens.contentSlotRightOpacityReadOnly}: 0.4; `, }, diff --git a/packages/sdds-serv/src/components/TextFieldGroup/TextFieldGroup.config.ts b/packages/sdds-serv/src/components/TextFieldGroup/TextFieldGroup.config.ts index 200d2e26ac4..0558934bbac 100644 --- a/packages/sdds-serv/src/components/TextFieldGroup/TextFieldGroup.config.ts +++ b/packages/sdds-serv/src/components/TextFieldGroup/TextFieldGroup.config.ts @@ -1,3 +1,4 @@ +import { bodyL, bodyM, bodyS, bodyXS } from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, textFieldGroupTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -21,28 +22,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; @@ -55,12 +56,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.625rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.5rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.chipFontFamily}: ${bodyL.fontFamily}; + ${tokens.chipFontSize}: ${bodyL.fontSize}; + ${tokens.chipFontStyle}: ${bodyL.fontStyle}; + ${tokens.chipFontWeight}: ${bodyL.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.textFieldDefaultRadius}: 0.75rem; @@ -77,28 +78,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; @@ -111,12 +112,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.5rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1.25rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.chipFontFamily}: ${bodyM.fontFamily}; + ${tokens.chipFontSize}: ${bodyM.fontSize}; + ${tokens.chipFontStyle}: ${bodyM.fontStyle}; + ${tokens.chipFontWeight}: ${bodyM.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.textFieldSegmentedRadius}: 0.25rem; @@ -133,28 +134,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -167,12 +168,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.375rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 1rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.chipFontFamily}: ${bodyS.fontFamily}; + ${tokens.chipFontSize}: ${bodyS.fontSize}; + ${tokens.chipFontStyle}: ${bodyS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.textFieldSegmentedRadius}: 0.125rem; @@ -189,28 +190,28 @@ export const config = { ${tokens.textBeforeMargin}: 0 0.25rem 0 0; ${tokens.textAfterMargin}: 0 0 0 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.leftHelperOffset}: 0.25rem; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; @@ -223,12 +224,12 @@ export const config = { ${tokens.chipClearContentMarginLeft}: 0.25rem; ${tokens.chipClearContentMarginRight}: 0rem; ${tokens.chipCloseIconSize}: 0.75rem; - ${tokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.chipFontFamily}: ${bodyXS.fontFamily}; + ${tokens.chipFontSize}: ${bodyXS.fontSize}; + ${tokens.chipFontStyle}: ${bodyXS.fontStyle}; + ${tokens.chipFontWeight}: ${bodyXS.fontWeight}; + ${tokens.chipLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.chipLineHeight}: ${bodyXS.lineHeight}; `, }, orientation: { diff --git a/packages/sdds-serv/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts b/packages/sdds-serv/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts index a33164279df..f1cbd6adb0c 100644 --- a/packages/sdds-serv/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts +++ b/packages/sdds-serv/src/components/TextFieldSlider/TextFieldSlider.clear.config.ts @@ -1,3 +1,29 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentPrimary, + textAccent, + textNegative, + textPositive, + textPositiveActive, + textPositiveHover, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,10 +35,10 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -25,45 +51,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -76,45 +102,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-positive); - ${tokens.textFieldContentSlotColorHover}: var(--text-positive-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-positive-active); + ${tokens.textFieldContentSlotColor}: ${textPositive}; + ${tokens.textFieldContentSlotColorHover}: ${textPositiveHover}; + ${tokens.textFieldContentSlotColorActive}: ${textPositiveActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-positive); + ${tokens.scaleValueColor}: ${textPositive}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -127,45 +153,45 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; ${tokens.textFieldErrorColor}: transparent; ${tokens.textFieldBackgroundErrorColor}: transparent; @@ -178,50 +204,50 @@ export const config = { ${tokens.textFieldBorderColorHover}: transparent; ${tokens.textFieldBorderColorFocus}: transparent; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-negative); + ${tokens.scaleValueColor}: ${textNegative}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -235,38 +261,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -288,12 +314,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -305,38 +331,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -358,12 +384,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -375,38 +401,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -428,12 +454,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -445,38 +471,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -498,12 +524,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -515,38 +541,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.25rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -568,20 +594,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -594,12 +620,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -618,12 +644,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -641,12 +667,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-serv/src/components/TextFieldSlider/TextFieldSlider.config.ts b/packages/sdds-serv/src/components/TextFieldSlider/TextFieldSlider.config.ts index c63635d3490..fbb62c6a45d 100644 --- a/packages/sdds-serv/src/components/TextFieldSlider/TextFieldSlider.config.ts +++ b/packages/sdds-serv/src/components/TextFieldSlider/TextFieldSlider.config.ts @@ -1,3 +1,35 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + onLightSurfaceSolidCard, + onLightSurfaceTransparentTertiary, + shadowDownHardM, + surfaceAccent, + surfaceAccentGradient, + surfaceNegative, + surfaceSolidCardBrightness, + surfaceSolidDefault, + surfaceSolidTertiary, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentPrimaryActive, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + surfaceTransparentWarning, + surfaceTransparentWarningActive, + textAccent, + textNegative, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, textFieldSliderTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,207 +41,207 @@ export const config = { variations: { view: { default: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-primary-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPrimaryActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; - ${tokens.textFieldBorderColor}: var(--surface-transparent-tertiary); - ${tokens.textFieldBorderColorHover}: var(--text-secondary); - ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColor}: ${surfaceTransparentTertiary}; + ${tokens.textFieldBorderColorHover}: ${textSecondary}; + ${tokens.textFieldBorderColorFocus}: ${surfaceAccent}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, positive: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-positive-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentPositiveActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, warning: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-warning-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentWarning}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentWarningActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentWarningActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, negative: css` - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.textFieldErrorColor}: var(--text-negative); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldErrorColor}: ${textNegative}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundColorHover}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundColorHover}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentNegativeActive}; - ${tokens.labelColor}: var(--text-primary); - ${tokens.titleCaptionColor}: var(--text-secondary); - ${tokens.optionalColor}: var(--text-tertiary); + ${tokens.labelColor}: ${textPrimary}; + ${tokens.titleCaptionColor}: ${textSecondary}; + ${tokens.optionalColor}: ${textTertiary}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; - ${tokens.indicatorColor}: var(--surface-negative); - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.indicatorColor}: ${surfaceNegative}; + ${tokens.hintIconColor}: ${textSecondary}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldFocusColor}: ${textAccent}; - ${tokens.textFieldContentSlotColor}: var(--text-secondary); - ${tokens.textFieldContentSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentSlotColor}: ${textSecondary}; + ${tokens.textFieldContentSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentSlotColorActive}: ${textSecondaryActive}; - ${tokens.textFieldContentRightSlotColor}: var(--text-secondary); - ${tokens.textFieldContentRightSlotColorHover}: var(--text-secondary-hover); - ${tokens.textFieldContentRightSlotColorActive}: var(--text-secondary-active); + ${tokens.textFieldContentRightSlotColor}: ${textSecondary}; + ${tokens.textFieldContentRightSlotColorHover}: ${textSecondaryHover}; + ${tokens.textFieldContentRightSlotColorActive}: ${textSecondaryActive}; - ${tokens.sliderTrackBackground}: var(--surface-solid-tertiary); - ${tokens.sliderThumbBackground}: var(--on-light-surface-solid-card); - ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem var(--on-light-surface-transparent-tertiary); - ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem var(--surface-solid-default); + ${tokens.sliderTrackBackground}: ${surfaceSolidTertiary}; + ${tokens.sliderThumbBackground}: ${onLightSurfaceSolidCard}; + ${tokens.sliderThumbBorderBoxShadow}: 0 0 0 0.063rem ${onLightSurfaceTransparentTertiary}; + ${tokens.sliderThumbBorderBoxShadowFocus}: 0 0 0 0.063rem ${surfaceSolidDefault}; - ${tokens.scaleValueColor}: var(--text-secondary); + ${tokens.scaleValueColor}: ${textSecondary}; `, }, sliderView: { default: css` - ${tokens.sliderProgressBackground}: var(--surface-solid-default); + ${tokens.sliderProgressBackground}: ${surfaceSolidDefault}; `, accent: css` - ${tokens.sliderProgressBackground}: var(--surface-accent); + ${tokens.sliderProgressBackground}: ${surfaceAccent}; `, gradient: css` - ${tokens.sliderProgressBackground}: var(--surface-accent-gradient); + ${tokens.sliderProgressBackground}: ${surfaceAccentGradient}; `, }, size: { @@ -223,38 +255,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.8125rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.813rem 0 0.813rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -276,12 +308,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, l: css` ${tokens.textFieldHeight}: 3.5rem; @@ -293,38 +325,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.labelOffset}: 0.75rem; ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -346,12 +378,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, m: css` ${tokens.textFieldHeight}: 3rem; @@ -363,38 +395,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.labelOffset}: 0.625rem; ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -416,12 +448,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, s: css` ${tokens.textFieldHeight}: 2.5rem; @@ -433,38 +465,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.labelOffset}: 0.5rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -486,12 +518,12 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, xs: css` ${tokens.textFieldHeight}: 2rem; @@ -503,38 +535,38 @@ export const config = { ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.labelOffset}: 0.375rem; ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.titleCaptionInnerLabelOffset}: 0.25rem; - ${tokens.titleCaptionFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.titleCaptionFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.titleCaptionFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.titleCaptionFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.titleCaptionLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.titleCaptionLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.titleCaptionFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleCaptionFontSize}: ${bodyXS.fontSize}; + ${tokens.titleCaptionFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleCaptionFontWeight}: ${bodyXS.fontWeight}; + ${tokens.titleCaptionLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleCaptionLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -556,20 +588,20 @@ export const config = { ${tokens.scaleWrapperOffset}: 0.25rem; ${tokens.scaleWrapperPaddingTop}: 0.25rem; - ${tokens.scaleValueFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.scaleValueFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.scaleValueFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.scaleValueFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.scaleValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.scaleValueLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.scaleValueFontSize}: ${bodyXS.fontSize}; + ${tokens.scaleValueFontFamily}: ${bodyXS.fontFamily}; + ${tokens.scaleValueFontStyle}: ${bodyXS.fontStyle}; + ${tokens.scaleValueFontWeight}: ${bodyXS.fontWeight}; + ${tokens.scaleValueLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.scaleValueLineHeight}: ${bodyXS.lineHeight}; `, }, hintView: { default: css` - ${tokens.hintTooltipBackgroundColor}: var(--surface-solid-card-brightness); - ${tokens.hintTooltipBoxShadow}: var(--shadow-down-hard-m); - ${tokens.hintTooltipColor}: var(--text-primary); - ${tokens.hintTooltipArrowBackground}: var(--surface-solid-card-brightness); + ${tokens.hintTooltipBackgroundColor}: ${surfaceSolidCardBrightness}; + ${tokens.hintTooltipBoxShadow}: ${shadowDownHardM}; + ${tokens.hintTooltipColor}: ${textPrimary}; + ${tokens.hintTooltipArrowBackground}: ${surfaceSolidCardBrightness}; `, }, hintSize: { @@ -582,12 +614,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2.5rem; ${tokens.hintTooltipBorderRadius}: 0.625rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.375rem; @@ -606,12 +638,12 @@ export const config = { ${tokens.hintTooltipMinHeight}: 2rem; ${tokens.hintTooltipBorderRadius}: 0.5rem; - ${tokens.hintTooltipTextFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.hintTooltipTextFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.hintTooltipTextFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.hintTooltipTextFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.hintTooltipTextFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.hintTooltipTextFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.hintTooltipTextFontFamily}: ${bodyXS.fontFamily}; + ${tokens.hintTooltipTextFontSize}: ${bodyXS.fontSize}; + ${tokens.hintTooltipTextFontStyle}: ${bodyXS.fontStyle}; + ${tokens.hintTooltipTextFontWeight}: ${bodyXS.fontWeight}; + ${tokens.hintTooltipTextFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.hintTooltipTextFontLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintTooltipContentLeftMargin}: 0.25rem; @@ -629,12 +661,12 @@ export const config = { }, readOnly: { true: css` - ${tokens.labelColorReadOnly}: var(--text-primary); + ${tokens.labelColorReadOnly}: ${textPrimary}; - ${tokens.textFieldColorReadOnly}: var(--text-primary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textPrimary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBorderColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; ${tokens.textFieldContentSlotRightOpacityReadOnly}: 0.4; ${tokens.textFieldReadOnlyOpacity}: 0.1; diff --git a/packages/sdds-serv/src/components/TimePicker/TimePicker.config.ts b/packages/sdds-serv/src/components/TimePicker/TimePicker.config.ts index b86cc9da0bd..2983d6d8b2e 100644 --- a/packages/sdds-serv/src/components/TimePicker/TimePicker.config.ts +++ b/packages/sdds-serv/src/components/TimePicker/TimePicker.config.ts @@ -1,3 +1,26 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + shadowDownSoftS, + surfaceAccent, + surfaceNegative, + surfaceSolidCard, + surfaceTransparentNegative, + surfaceTransparentNegativeActive, + surfaceTransparentPositive, + surfaceTransparentPositiveActive, + surfaceTransparentPrimary, + surfaceTransparentSecondary, + surfaceTransparentTertiary, + textAccent, + textNegative, + textPositive, + textPrimary, + textSecondary, + textTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { timePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -10,45 +33,45 @@ export const config = { variations: { view: { default: css` - ${tokens.background}: var(--surface-transparent-primary); - ${tokens.backgroundError}: var(--surface-transparent-negative); - ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + ${tokens.background}: ${surfaceTransparentPrimary}; + ${tokens.backgroundError}: ${surfaceTransparentNegative}; + ${tokens.backgroundSuccess}: ${surfaceTransparentPositive}; - ${tokens.labelColor}: var(--text-primary); + ${tokens.labelColor}: ${textPrimary}; - ${tokens.textFieldColor}: var(--text-primary); - ${tokens.textFieldPlaceholderColor}: var(--text-secondary); - ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldColor}: ${textPrimary}; + ${tokens.textFieldPlaceholderColor}: ${textSecondary}; + ${tokens.textFieldCaretColor}: ${textAccent}; - ${tokens.indicatorColor}: var(--surface-negative); + ${tokens.indicatorColor}: ${surfaceNegative}; - ${tokens.timePickerShadow}: var(--shadow-down-soft-s); + ${tokens.timePickerShadow}: ${shadowDownSoftS}; - ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); - ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); - ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); - ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); - ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); - ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldBackgroundColor}: ${surfaceTransparentPrimary}; + ${tokens.textFieldBackgroundColorFocus}: ${surfaceTransparentSecondary}; + ${tokens.textFieldBackgroundErrorColor}: ${surfaceTransparentNegative}; + ${tokens.textFieldBackgroundErrorColorFocus}: ${surfaceTransparentNegativeActive}; + ${tokens.textFieldBackgroundSuccessColor}: ${surfaceTransparentPositive}; + ${tokens.textFieldBackgroundSuccessColorFocus}: ${surfaceTransparentPositiveActive}; - ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); - ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldTextBeforeColor}: ${textTertiary}; + ${tokens.textFieldTextAfterColor}: ${textTertiary}; - ${tokens.textFieldPlaceholderColorFocus}: var(--text-tertiary); + ${tokens.textFieldPlaceholderColorFocus}: ${textTertiary}; - ${tokens.timePickerBackground}: var(--surface-solid-card); - ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${tokens.itemBackgroundActive}: var(--surface-transparent-secondary); - ${tokens.itemFocusColor}: var(--surface-accent); + ${tokens.timePickerBackground}: ${surfaceSolidCard}; + ${tokens.itemBackgroundHover}: ${surfaceTransparentSecondary}; + ${tokens.itemBackgroundActive}: ${surfaceTransparentSecondary}; + ${tokens.itemFocusColor}: ${surfaceAccent}; - ${tokens.scrollbarColor}: var(--surface-transparent-tertiary); - ${tokens.scrollbarTrackColor}: var(--surface-transparent-primary); + ${tokens.scrollbarColor}: ${surfaceTransparentTertiary}; + ${tokens.scrollbarTrackColor}: ${surfaceTransparentPrimary}; - ${tokens.leftHelperColor}: var(--text-secondary); - ${tokens.leftHelperColorError}: var(--text-negative); - ${tokens.leftHelperColorSuccess}: var(--text-positive); + ${tokens.leftHelperColor}: ${textSecondary}; + ${tokens.leftHelperColorError}: ${textNegative}; + ${tokens.leftHelperColorSuccess}: ${textPositive}; - ${tokens.hintIconColor}: var(--text-secondary); + ${tokens.hintIconColor}: ${textSecondary}; `, }, size: { @@ -63,12 +86,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.5625rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.labelFontFamily}: ${bodyL.fontFamily}; + ${tokens.labelFontStyle}: ${bodyL.fontStyle}; + ${tokens.labelFontSize}: ${bodyL.fontSize}; + ${tokens.labelFontWeight}: ${bodyL.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyL.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -80,12 +103,12 @@ export const config = { ${tokens.textFieldHeight}: 3.5rem; ${tokens.textFieldBorderRadius}: 0.875rem; ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyL.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyL.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyL.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -103,34 +126,34 @@ export const config = { ${tokens.columnHeight}: 36.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.itemFontFamily}: ${bodyL.fontFamily}; + ${tokens.itemFontSize}: ${bodyL.fontSize}; + ${tokens.itemFontStyle}: ${bodyL.fontStyle}; + ${tokens.itemFontWeight}: ${bodyL.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyL.lineHeight}; ${tokens.itemHeight}: 3.5rem; ${tokens.itemBorderRadius}: 0.75rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.563rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.5rem; @@ -146,12 +169,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.375rem 0 0.125rem 0; ${tokens.contentLabelInnerPadding}: 1.375rem 0 0.375rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.labelFontFamily}: ${bodyM.fontFamily}; + ${tokens.labelFontStyle}: ${bodyM.fontStyle}; + ${tokens.labelFontSize}: ${bodyM.fontSize}; + ${tokens.labelFontWeight}: ${bodyM.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyM.lineHeight}; ${tokens.indicatorSize}: 0.5rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -163,12 +186,12 @@ export const config = { ${tokens.textFieldHeight}: 3rem; ${tokens.textFieldBorderRadius}: 0.75rem; ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyM.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyM.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyM.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; @@ -186,34 +209,34 @@ export const config = { ${tokens.columnHeight}: 31.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.itemFontFamily}: ${bodyM.fontFamily}; + ${tokens.itemFontSize}: ${bodyM.fontSize}; + ${tokens.itemFontStyle}: ${bodyM.fontStyle}; + ${tokens.itemFontWeight}: ${bodyM.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyM.lineHeight}; ${tokens.itemHeight}: 3rem; ${tokens.itemBorderRadius}: 0.625rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.312rem -2.938rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.375rem; @@ -229,12 +252,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.labelFontFamily}: ${bodyS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyS.fontStyle}; + ${tokens.labelFontSize}: ${bodyS.fontSize}; + ${tokens.labelFontWeight}: ${bodyS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -246,12 +269,12 @@ export const config = { ${tokens.textFieldHeight}: 2.5rem; ${tokens.textFieldBorderRadius}: 0.625rem; ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; @@ -269,34 +292,34 @@ export const config = { ${tokens.columnHeight}: 26.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.itemFontFamily}: ${bodyS.fontFamily}; + ${tokens.itemFontSize}: ${bodyS.fontSize}; + ${tokens.itemFontStyle}: ${bodyS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyS.lineHeight}; ${tokens.itemHeight}: 2.5rem; ${tokens.itemBorderRadius}: 0.5rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.688rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: 0.062rem -2.813rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -312,12 +335,12 @@ export const config = { ${tokens.labelInnerPadding}: 0.3125rem 0 0 0; ${tokens.contentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; - ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelFontSize}: ${bodyXS.fontSize}; + ${tokens.labelFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelLineHeight}: ${bodyXS.lineHeight}; ${tokens.indicatorSize}: 0.375rem; ${tokens.indicatorSizeOuter}: 0.375rem; @@ -329,12 +352,12 @@ export const config = { ${tokens.textFieldHeight}: 2rem; ${tokens.textFieldBorderRadius}: 0.5rem; ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; - ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFieldFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFieldFontSize}: ${bodyXS.fontSize}; + ${tokens.textFieldFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textFieldLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textFieldLineHeight}: ${bodyXS.lineHeight}; ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; @@ -352,34 +375,34 @@ export const config = { ${tokens.columnHeight}: 21.25rem; - ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.itemLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.itemLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.itemFontFamily}: ${bodyXS.fontFamily}; + ${tokens.itemFontSize}: ${bodyXS.fontSize}; + ${tokens.itemFontStyle}: ${bodyXS.fontStyle}; + ${tokens.itemFontWeight}: ${bodyXS.fontWeight}; + ${tokens.itemLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.itemLineHeight}: ${bodyXS.lineHeight}; ${tokens.itemHeight}: 2rem; ${tokens.itemBorderRadius}: 0.375rem; ${tokens.itemPadding}: 0rem; - ${tokens.labelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.labelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.labelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.labelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.labelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.labelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.labelInnerFontFamily}: ${bodyXS.fontFamily}; + ${tokens.labelInnerFontSize}: ${bodyXS.fontSize}; + ${tokens.labelInnerFontStyle}: ${bodyXS.fontStyle}; + ${tokens.labelInnerFontWeight}: ${bodyXS.fontWeight}; + ${tokens.labelInnerLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.labelInnerLineHeight}: ${bodyXS.lineHeight}; ${tokens.hintMargin}: -0.75rem -0.625rem -0.75rem -0.5rem; ${tokens.hintTargetSize}: 2.375rem; ${tokens.hintInnerLabelPlacementOffset}: -0.188rem -2.1875rem auto auto; ${tokens.leftHelperOffset}: 0.25rem 0 0 0; - ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.leftHelperFontFamily}: ${bodyXS.fontFamily}; + ${tokens.leftHelperFontStyle}: ${bodyXS.fontStyle}; + ${tokens.leftHelperFontSize}: ${bodyXS.fontSize}; + ${tokens.leftHelperFontWeight}: ${bodyXS.fontWeight}; + ${tokens.leftHelperLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.leftHelperLineHeight}: ${bodyXS.lineHeight}; ${tokens.scrollbarWidth}: 0.125rem; ${tokens.scrollbarMargin}: 0.25rem; @@ -450,13 +473,13 @@ export const config = { }, readonly: { true: css` - ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); - ${tokens.labelColorReadOnly}: var(--text-secondary); - ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.backgroundReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.labelColorReadOnly}: ${textSecondary}; + ${tokens.leftHelperColorReadOnly}: ${textSecondary}; - ${tokens.textFieldColorReadOnly}: var(--text-secondary); - ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); - ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldColorReadOnly}: ${textSecondary}; + ${tokens.textFieldBackgroundColorReadOnly}: ${surfaceTransparentPrimary}; + ${tokens.textFieldPlaceholderColorReadOnly}: ${textSecondary}; `, }, }, diff --git a/packages/sdds-serv/src/components/Toast/Toast.config.ts b/packages/sdds-serv/src/components/Toast/Toast.config.ts index 9678f1dd594..fcaef0186f2 100644 --- a/packages/sdds-serv/src/components/Toast/Toast.config.ts +++ b/packages/sdds-serv/src/components/Toast/Toast.config.ts @@ -1,3 +1,17 @@ +import { + bodyXS, + onDarkSurfaceSolidPrimaryBrightness, + onDarkTextPrimary, + onDarkTextSecondary, + onLightSurfaceSolidPrimaryBrightness, + onLightTextPrimary, + onLightTextSecondary, + surfaceSolidCardBrightness, + textNegative, + textPositive, + textPrimary, + textSecondary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, toastTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -9,49 +23,49 @@ export const config = { variations: { view: { default: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, positive: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-positive); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textPositive}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, negative: css` - ${toastTokens.color}: var(--text-primary); - ${toastTokens.background}: var(--surface-solid-card-brightness); - ${toastTokens.contentLeftColor}: var(--text-negative); + ${toastTokens.color}: ${textPrimary}; + ${toastTokens.background}: ${surfaceSolidCardBrightness}; + ${toastTokens.contentLeftColor}: ${textNegative}; - ${toastTokens.closeIconColor}: var(--text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--text-secondary); + ${toastTokens.closeIconColor}: ${textSecondary}; + ${toastTokens.closeIconColorOnHover}: ${textSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ dark: css` - ${toastTokens.color}: var(--on-dark-text-primary); - ${toastTokens.background}: var(--on-dark-surface-solid-primary-brightness); + ${toastTokens.color}: ${onDarkTextPrimary}; + ${toastTokens.background}: ${onDarkSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-dark-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-dark-text-secondary); + ${toastTokens.closeIconColor}: ${onDarkTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onDarkTextSecondary}; `, /** * @deprecated * светлый и темный фон регулировать через `view` компонента `ViewContainer` */ light: css` - ${toastTokens.color}: var(--on-light-text-primary); - ${toastTokens.background}: var(--on-light-surface-solid-primary-brightness); + ${toastTokens.color}: ${onLightTextPrimary}; + ${toastTokens.background}: ${onLightSurfaceSolidPrimaryBrightness}; - ${toastTokens.closeIconColor}: var(--on-light-text-secondary); - ${toastTokens.closeIconColorOnHover}: var(--on-light-text-secondary); + ${toastTokens.closeIconColor}: ${onLightTextSecondary}; + ${toastTokens.closeIconColorOnHover}: ${onLightTextSecondary}; `, }, size: { @@ -59,12 +73,12 @@ export const config = { ${toastTokens.borderRadius}: 0.75rem; ${toastTokens.maxWidth}: calc(100vw - 5rem); ${toastTokens.padding}: 0.5625rem 0.75rem; - ${toastTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${toastTokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${toastTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${toastTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${toastTokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${toastTokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${toastTokens.fontFamily}: ${bodyXS.fontFamily}; + ${toastTokens.fontSize}: ${bodyXS.fontSize}; + ${toastTokens.fontStyle}: ${bodyXS.fontStyle}; + ${toastTokens.fontWeight}: ${bodyXS.fontWeight}; + ${toastTokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${toastTokens.lineHeight}: ${bodyXS.lineHeight}; ${toastTokens.contentLeftMargin}: -0.0625rem 0.375rem -0.0625rem -0.125rem; ${toastTokens.closeIconMargin}: -0.0625rem -0.25rem -0.0625rem 0.5rem; diff --git a/packages/sdds-serv/src/components/Toolbar/Toolbar.config.ts b/packages/sdds-serv/src/components/Toolbar/Toolbar.config.ts index 89581b0d6bf..9cb480ea452 100644 --- a/packages/sdds-serv/src/components/Toolbar/Toolbar.config.ts +++ b/packages/sdds-serv/src/components/Toolbar/Toolbar.config.ts @@ -1,3 +1,8 @@ +import { + shadowDownSoftS, + surfaceSolidCardBrightness, + surfaceTransparentTertiary, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, toolbarTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,11 +13,11 @@ export const config = { variations: { view: { default: css` - /* TODO: заменить значение box-shadow на var(--shadow-down-soft-s). https://github.com/salute-developers/plasma/issues/1131 */ + /* TODO: заменить значение box-shadow на ${shadowDownSoftS}. https://github.com/salute-developers/plasma/issues/1131 */ ${toolbarTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); - ${toolbarTokens.background}: var(--surface-solid-card-brightness); + ${toolbarTokens.background}: ${surfaceSolidCardBrightness}; - ${toolbarTokens.dividerColor}: var(--surface-transparent-tertiary); + ${toolbarTokens.dividerColor}: ${surfaceTransparentTertiary}; `, }, size: { diff --git a/packages/sdds-serv/src/components/Tooltip/Tooltip.config.ts b/packages/sdds-serv/src/components/Tooltip/Tooltip.config.ts index 2ca59cef4c5..063bded1eea 100644 --- a/packages/sdds-serv/src/components/Tooltip/Tooltip.config.ts +++ b/packages/sdds-serv/src/components/Tooltip/Tooltip.config.ts @@ -1,3 +1,4 @@ +import { bodyS, bodyXS, surfaceSolidCardBrightness, textPrimary } from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, tooltipTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -16,12 +17,12 @@ export const config = { ${tooltipTokens.minHeight}: 2rem; ${tooltipTokens.borderRadius}: 0.5rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-xs-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-xs-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-xs-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tooltipTokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyXS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyXS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.25rem; @@ -30,7 +31,7 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMCw5Ljg1bDE2LDBjLTQuNDEsMCAtOCwyLjY5IC04LDZjMCwtMy4zMSAtMy41OSwtNiAtOCwtNnoiIGZpbGw9IiMxNzE3MTciIGZpbGwtcnVsZT0iZXZlbm9kZCIgaWQ9IlRhaWwiLz4KPC9zdmc+"); ${tooltipTokens.arrowHeight}: 0.375rem; ${tooltipTokens.arrowEdgeMargin}: 0.5625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, m: css` ${tooltipTokens.paddingTop}: 0.6875rem; @@ -41,12 +42,12 @@ export const config = { ${tooltipTokens.minHeight}: 2.5rem; ${tooltipTokens.borderRadius}: 0.625rem; - ${tooltipTokens.textFontFamily}: var(--plasma-typo-body-s-font-family); - ${tooltipTokens.textFontSize}: var(--plasma-typo-body-s-font-size); - ${tooltipTokens.textFontStyle}: var(--plasma-typo-body-s-font-style); - ${tooltipTokens.textFontWeight}: var(--plasma-typo-body-s-font-weight); - ${tooltipTokens.textFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tooltipTokens.textFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tooltipTokens.textFontFamily}: ${bodyS.fontFamily}; + ${tooltipTokens.textFontSize}: ${bodyS.fontSize}; + ${tooltipTokens.textFontStyle}: ${bodyS.fontStyle}; + ${tooltipTokens.textFontWeight}: ${bodyS.fontWeight}; + ${tooltipTokens.textFontLetterSpacing}: ${bodyS.letterSpacing}; + ${tooltipTokens.textFontLineHeight}: ${bodyS.lineHeight}; ${tooltipTokens.contentLeftMargin}: 0.375rem; @@ -55,15 +56,15 @@ export const config = { ${tooltipTokens.arrowMaskImage}: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggY2xpcC1ydWxlPSJldmVub2RkIiBkPSJtMC4xNywxMS44M2wyMCwwYy01LjUyLDAgLTEwLDMuNTkgLTEwLDhjMCwtNC40MSAtNC40OCwtOCAtMTAsLTh6IiBmaWxsPSIjMTcxNzE3IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGlkPSJUYWlsIi8+Cjwvc3ZnPg=="); ${tooltipTokens.arrowHeight}: 0.5rem; ${tooltipTokens.arrowEdgeMargin}: 0.625rem; - ${tooltipTokens.arrowBackground}: var(--surface-solid-card-brightness); + ${tooltipTokens.arrowBackground}: ${surfaceSolidCardBrightness}; `, }, view: { // TODO заменить тень на токен https://github.com/salute-developers/plasma/issues/1131 default: css` - ${tooltipTokens.backgroundColor}: var(--surface-solid-card-brightness); + ${tooltipTokens.backgroundColor}: ${surfaceSolidCardBrightness}; ${tooltipTokens.boxShadow}: 0px 4px 12px 0px rgba(0, 0, 0, 0.16),0px 1px 4px 0px rgba(0, 0, 0, 0.08); - ${tooltipTokens.color}: var(--text-primary); + ${tooltipTokens.color}: ${textPrimary}; `, }, }, diff --git a/packages/sdds-serv/src/components/Tree/Tree.config.ts b/packages/sdds-serv/src/components/Tree/Tree.config.ts index e8cbfce73a6..7d656d6849d 100644 --- a/packages/sdds-serv/src/components/Tree/Tree.config.ts +++ b/packages/sdds-serv/src/components/Tree/Tree.config.ts @@ -1,3 +1,19 @@ +import { + bodyL, + bodyM, + bodyS, + bodyXS, + surfacePositive, + surfaceSolidDefault, + surfaceTransparentSecondary, + surfaceTransparentSecondaryActive, + surfaceTransparentSecondaryHover, + textAccent, + textPrimary, + textSecondary, + textSecondaryActive, + textSecondaryHover, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, treeTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { @@ -8,24 +24,24 @@ export const config = { variations: { view: { default: css` - ${tokens.iconFolderColor}: var(--text-primary); - ${tokens.arrowColor}: var(--text-secondary); - ${tokens.arrowColorHover}: var(--text-secondary-hover); - ${tokens.arrowColorActive}: var(--text-secondary-active); - ${tokens.color}: var(--text-primary); - ${tokens.colorSelected}: var(--text-primary); - ${tokens.itemBackgroundColorSelected}: var(--surface-transparent-secondary); + ${tokens.iconFolderColor}: ${textPrimary}; + ${tokens.arrowColor}: ${textSecondary}; + ${tokens.arrowColorHover}: ${textSecondaryHover}; + ${tokens.arrowColorActive}: ${textSecondaryActive}; + ${tokens.color}: ${textPrimary}; + ${tokens.colorSelected}: ${textPrimary}; + ${tokens.itemBackgroundColorSelected}: ${surfaceTransparentSecondary}; ${tokens.itemBackgroundColorPrimary}: transparent; - ${tokens.itemBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${tokens.itemBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${tokens.checkboxBorderColor}: var(--text-secondary); - ${tokens.checkboxBackgroundColor}: var(--text-accent); + ${tokens.itemBackgroundColorHover}: ${surfaceTransparentSecondaryHover}; + ${tokens.itemBackgroundColorActive}: ${surfaceTransparentSecondaryActive}; + ${tokens.checkboxBorderColor}: ${textSecondary}; + ${tokens.checkboxBackgroundColor}: ${textAccent}; ${tokens.itemDisabledOpacity}: 0.4; - ${tokens.itemDisabledBorderColor}: var(--text-secondary); - ${tokens.itemDisabledColor}: var(--text-secondary); - ${tokens.itemDraggableBorderColor}: var(--surface-positive); - ${tokens.itemDraggableLineColor}: var(--surface-solid-default); + ${tokens.itemDisabledBorderColor}: ${textSecondary}; + ${tokens.itemDisabledColor}: ${textSecondary}; + ${tokens.itemDraggableBorderColor}: ${surfacePositive}; + ${tokens.itemDraggableLineColor}: ${surfaceSolidDefault}; `, }, size: { @@ -53,12 +69,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, l: css` ${tokens.itemHeight}: 3.5rem; @@ -84,12 +100,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.fontFamily}: ${bodyL.fontFamily}; + ${tokens.fontSize}: ${bodyL.fontSize}; + ${tokens.fontStyle}: ${bodyL.fontStyle}; + ${tokens.fontWeight}: ${bodyL.fontWeight}; + ${tokens.letterSpacing}: ${bodyL.letterSpacing}; + ${tokens.lineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.itemHeight}: 3rem; @@ -115,12 +131,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyM.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.itemHeight}: 2.5rem; @@ -146,12 +162,12 @@ export const config = { ${tokens.checkboxInnerSize}: 1.25rem; ${tokens.checkboxBorderRadius}: 0.375rem; - ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.fontFamily}: ${bodyS.fontFamily}; + ${tokens.fontSize}: ${bodyS.fontSize}; + ${tokens.fontStyle}: ${bodyS.fontStyle}; + ${tokens.fontWeight}: ${bodyS.fontWeight}; + ${tokens.letterSpacing}: ${bodyS.letterSpacing}; + ${tokens.lineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.itemHeight}: 2rem; @@ -177,12 +193,12 @@ export const config = { ${tokens.checkboxInnerSize}: 0.875rem; ${tokens.checkboxBorderRadius}: 0.25rem; - ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); - ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); - ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); - ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); - ${tokens.letterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${tokens.lineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.fontFamily}: ${bodyXS.fontFamily}; + ${tokens.fontSize}: ${bodyXS.fontSize}; + ${tokens.fontStyle}: ${bodyXS.fontStyle}; + ${tokens.fontWeight}: ${bodyXS.fontWeight}; + ${tokens.letterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.lineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-serv/src/components/Typography/Body.config.ts b/packages/sdds-serv/src/components/Typography/Body.config.ts index 23927fdf18c..77b809cadb0 100644 --- a/packages/sdds-serv/src/components/Typography/Body.config.ts +++ b/packages/sdds-serv/src/components/Typography/Body.config.ts @@ -1,3 +1,20 @@ +import { + bodyL, + bodyLBold, + bodyLMedium, + bodyM, + bodyMBold, + bodyMMedium, + bodyS, + bodySBold, + bodySMedium, + bodyXS, + bodyXSBold, + bodyXSMedium, + bodyXXS, + bodyXXSBold, + bodyXXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +24,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${typographyTokens.typoFontFamily}: ${bodyL.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyL.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyL.lineHeight}; `, }, }, @@ -27,14 +44,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${typographyTokens.typoFontFamily}: ${bodyM.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyM.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyM.lineHeight}; `, }, }, @@ -47,14 +64,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${typographyTokens.typoFontFamily}: ${bodyS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodySBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodySMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyS.lineHeight}; `, }, }, @@ -67,14 +84,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXS.lineHeight}; `, }, }, @@ -87,14 +104,14 @@ export const configXXS = { variations: { size: { xxs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-body-xxs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-body-xxs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-body-xxs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${typographyTokens.typoFontFamily}: ${bodyXXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${bodyXXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${bodyXXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${bodyXXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${bodyXXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${bodyXXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${bodyXXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${bodyXXS.lineHeight}; `, }, }, diff --git a/packages/sdds-serv/src/components/Typography/Dspl.config.ts b/packages/sdds-serv/src/components/Typography/Dspl.config.ts index 3fb1245a027..33a981daf4d 100644 --- a/packages/sdds-serv/src/components/Typography/Dspl.config.ts +++ b/packages/sdds-serv/src/components/Typography/Dspl.config.ts @@ -1,3 +1,14 @@ +import { + dsplL, + dsplLBold, + dsplLMedium, + dsplM, + dsplMBold, + dsplMMedium, + dsplS, + dsplSBold, + dsplSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +18,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-l-line-height); + ${typographyTokens.typoFontFamily}: ${dsplL.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplL.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplL.lineHeight}; `, }, }, @@ -27,14 +38,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-m-line-height); + ${typographyTokens.typoFontFamily}: ${dsplM.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplM.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplM.lineHeight}; `, }, }, @@ -47,14 +58,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-dspl-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-dspl-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-dspl-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-dspl-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-dspl-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-dspl-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-dspl-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-dspl-s-line-height); + ${typographyTokens.typoFontFamily}: ${dsplS.fontFamily}; + ${typographyTokens.typoFontSize}: ${dsplS.fontSize}; + ${typographyTokens.typoFontStyle}: ${dsplS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${dsplS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${dsplSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${dsplSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${dsplS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${dsplS.lineHeight}; `, }, }, diff --git a/packages/sdds-serv/src/components/Typography/Heading.config.ts b/packages/sdds-serv/src/components/Typography/Heading.config.ts index 77f16729129..a6f97d52bdd 100644 --- a/packages/sdds-serv/src/components/Typography/Heading.config.ts +++ b/packages/sdds-serv/src/components/Typography/Heading.config.ts @@ -1,3 +1,23 @@ +import { + h1, + h1Bold, + h1Medium, + h2, + h2Bold, + h2Medium, + h3, + h3Bold, + h3Medium, + h4, + h4Bold, + h4Medium, + h5, + h5Bold, + h5Medium, + h6, + h6Bold, + h6Medium, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configH1 = { @@ -7,14 +27,14 @@ export const configH1 = { variations: { size: { h1: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h1-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h1-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h1-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h1-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h1-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h1-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h1-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h1-line-height); + ${typographyTokens.typoFontFamily}: ${h1.fontFamily}; + ${typographyTokens.typoFontSize}: ${h1.fontSize}; + ${typographyTokens.typoFontStyle}: ${h1.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h1.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h1Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h1Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h1.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h1.lineHeight}; `, }, }, @@ -26,14 +46,14 @@ export const configH2 = { variations: { size: { h2: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h2-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h2-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h2-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h2-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h2-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h2-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h2-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h2-line-height); + ${typographyTokens.typoFontFamily}: ${h2.fontFamily}; + ${typographyTokens.typoFontSize}: ${h2.fontSize}; + ${typographyTokens.typoFontStyle}: ${h2.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h2.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h2Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h2Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h2.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h2.lineHeight}; `, }, }, @@ -45,14 +65,14 @@ export const configH3 = { variations: { size: { h3: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h3-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h3-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h3-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h3-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h3-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h3-line-height); + ${typographyTokens.typoFontFamily}: ${h3.fontFamily}; + ${typographyTokens.typoFontSize}: ${h3.fontSize}; + ${typographyTokens.typoFontStyle}: ${h3.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h3.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h3Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h3Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h3.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h3.lineHeight}; `, }, }, @@ -64,14 +84,14 @@ export const configH4 = { variations: { size: { h4: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h4-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h4-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h4-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h4-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h4-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h4-line-height); + ${typographyTokens.typoFontFamily}: ${h4.fontFamily}; + ${typographyTokens.typoFontSize}: ${h4.fontSize}; + ${typographyTokens.typoFontStyle}: ${h4.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h4.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h4Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h4Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h4.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h4.lineHeight}; `, }, }, @@ -83,14 +103,14 @@ export const configH5 = { variations: { size: { h5: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h5-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h5-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h5-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h5-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h5-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h5-line-height); + ${typographyTokens.typoFontFamily}: ${h5.fontFamily}; + ${typographyTokens.typoFontSize}: ${h5.fontSize}; + ${typographyTokens.typoFontStyle}: ${h5.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h5.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h5Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h5Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h5.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h5.lineHeight}; `, }, }, @@ -102,14 +122,14 @@ export const configH6 = { variations: { size: { h6: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-h6-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-h6-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-h6-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-h6-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-h6-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-h6-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-h6-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-h6-line-height); + ${typographyTokens.typoFontFamily}: ${h6.fontFamily}; + ${typographyTokens.typoFontSize}: ${h6.fontSize}; + ${typographyTokens.typoFontStyle}: ${h6.fontStyle}; + ${typographyTokens.typoFontWeight}: ${h6.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${h6Bold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${h6Medium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${h6.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${h6.lineHeight}; `, }, }, diff --git a/packages/sdds-serv/src/components/Typography/Text.config.ts b/packages/sdds-serv/src/components/Typography/Text.config.ts index 542bc09a87d..6331238bfeb 100644 --- a/packages/sdds-serv/src/components/Typography/Text.config.ts +++ b/packages/sdds-serv/src/components/Typography/Text.config.ts @@ -1,3 +1,17 @@ +import { + textL, + textLBold, + textLMedium, + textM, + textMBold, + textMMedium, + textS, + textSBold, + textSMedium, + textXS, + textXSBold, + textXSMedium, +} from '@salutejs/sdds-themes/tokens/sdds_serv'; import { css, typographyTokens } from '@salutejs/plasma-new-hope/styled-components'; export const configL = { @@ -7,14 +21,14 @@ export const configL = { variations: { size: { l: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-l-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-l-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-l-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-l-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-l-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-l-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-l-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-l-line-height); + ${typographyTokens.typoFontFamily}: ${textL.fontFamily}; + ${typographyTokens.typoFontSize}: ${textL.fontSize}; + ${typographyTokens.typoFontStyle}: ${textL.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textL.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textLBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textLMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textL.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textL.lineHeight}; `, }, }, @@ -27,14 +41,14 @@ export const configM = { variations: { size: { m: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-m-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-m-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-m-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-m-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-m-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-m-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-m-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-m-line-height); + ${typographyTokens.typoFontFamily}: ${textM.fontFamily}; + ${typographyTokens.typoFontSize}: ${textM.fontSize}; + ${typographyTokens.typoFontStyle}: ${textM.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textM.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textMBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textMMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textM.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textM.lineHeight}; `, }, }, @@ -47,14 +61,14 @@ export const configS = { variations: { size: { s: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-s-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-s-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-s-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-s-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-s-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-s-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-s-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-s-line-height); + ${typographyTokens.typoFontFamily}: ${textS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textS.lineHeight}; `, }, }, @@ -67,14 +81,14 @@ export const configXS = { variations: { size: { xs: css` - ${typographyTokens.typoFontFamily}: var(--plasma-typo-text-xs-font-family); - ${typographyTokens.typoFontSize}: var(--plasma-typo-text-xs-font-size); - ${typographyTokens.typoFontStyle}: var(--plasma-typo-text-xs-font-style); - ${typographyTokens.typoFontWeight}: var(--plasma-typo-text-xs-font-weight); - ${typographyTokens.typoFontWeightBold}: var(--plasma-typo-text-xs-bold-font-weight); - ${typographyTokens.typoFontWeightMedium}: var(--plasma-typo-text-xs-medium-font-weight); - ${typographyTokens.typoFontLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing); - ${typographyTokens.typoFontLineHeight}: var(--plasma-typo-text-xs-line-height); + ${typographyTokens.typoFontFamily}: ${textXS.fontFamily}; + ${typographyTokens.typoFontSize}: ${textXS.fontSize}; + ${typographyTokens.typoFontStyle}: ${textXS.fontStyle}; + ${typographyTokens.typoFontWeight}: ${textXS.fontWeight}; + ${typographyTokens.typoFontWeightBold}: ${textXSBold.fontWeight}; + ${typographyTokens.typoFontWeightMedium}: ${textXSMedium.fontWeight}; + ${typographyTokens.typoFontLetterSpacing}: ${textXS.letterSpacing}; + ${typographyTokens.typoFontLineHeight}: ${textXS.lineHeight}; `, }, }, From 772dbcd3530a57ab1ba4b96f78e6019f8a18079a Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 21:20:43 +0300 Subject: [PATCH 21/24] docs: Improve report --- TOKEN_MIGRATION_REPORT.md | 146 +++++++----------- scripts/migrate-plasma-giga-config-tokens.mjs | 6 + 2 files changed, 64 insertions(+), 88 deletions(-) diff --git a/TOKEN_MIGRATION_REPORT.md b/TOKEN_MIGRATION_REPORT.md index b59e9d5f6fc..6cc98c83490 100644 --- a/TOKEN_MIGRATION_REPORT.md +++ b/TOKEN_MIGRATION_REPORT.md @@ -1,6 +1,6 @@ # Token migration report -Generated: 2026-03-27T17:14:56.031Z (repo root: `scripts/migrate-plasma-giga-config-tokens.mjs --all`) +Generated: 2026-03-27T17:57:14.730Z (repo root: `scripts/migrate-plasma-giga-config-tokens.mjs --all`) ## Summary @@ -45,12 +45,13 @@ Other trees outside the batch (e.g. ad-hoc fixtures) may still contain `var(--- ### Remaining `var(---…)` in batch packages (after this run) -- None found under batch packages’ config roots (e.g. `src/components/`** or `src/examples/components/**`). +- None found under batch packages’ config roots (e.g. `src/components/**` or `src/examples/components/**`). ## Per-package results - **Written this run:** `.config.ts` files the script saved in this invocation (still had `var(--*)` in a styled-components css template and every variable resolved). Usually **0** or small once the package is already migrated. - **Configs importing theme:** count of `.config.ts` files under the config root whose source contains an import from that package’s theme module. Measured **after** the run; includes files not touched this run. +- **Configs with no theme import:** `Config files` minus `Configs importing theme` (e.g. empty configs, or configs that use another token source such as component-local tokens). ### `plasma-giga` @@ -58,16 +59,13 @@ Other trees outside the batch (e.g. ad-hoc fixtures) may still contain `var(--- - **Import:** `@salutejs/plasma-themes/tokens/plasma_giga` - **Config files:** 80 - **Written this run:** 0 -- **No `var(--*)` (unchanged / already migrated):** 79 -- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **No `var(--*)` (unchanged / already migrated):** 80 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 0 - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 -- **Configs importing theme:** 76 - -Skipped (manual / non-css configs) - -- `packages/plasma-giga/src/components/Scrollbar/Scrollbar.config.ts` +- **Configs importing theme:** 77 +- **Configs with no theme import:** 3 ### `plasma-homeds` @@ -75,16 +73,13 @@ Skipped (manual / non-css configs) - **Import:** `@salutejs/plasma-themes/tokens/plasma_homeds` - **Config files:** 77 - **Written this run:** 0 -- **No `var(--*)` (unchanged / already migrated):** 76 -- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **No `var(--*)` (unchanged / already migrated):** 77 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 0 - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 -- **Configs importing theme:** 73 - -Skipped (manual / non-css configs) - -- `packages/plasma-homeds/src/components/Scrollbar/Scrollbar.config.ts` +- **Configs importing theme:** 74 +- **Configs with no theme import:** 3 ### `plasma-b2c` @@ -92,16 +87,13 @@ Skipped (manual / non-css configs) - **Import:** `@salutejs/plasma-themes/tokens/plasma_b2c` - **Config files:** 92 - **Written this run:** 0 -- **No `var(--*)` (unchanged / already migrated):** 80 -- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **No `var(--*)` (unchanged / already migrated):** 81 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 11 - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 -- **Configs importing theme:** 77 - -Skipped (manual / non-css configs) - -- `packages/plasma-b2c/src/components/Scrollbar/Scrollbar.config.ts` +- **Configs importing theme:** 78 +- **Configs with no theme import:** 14 **Unresolved variables (not written):** @@ -123,16 +115,13 @@ Skipped (manual / non-css configs) - **Import:** `@salutejs/plasma-themes/tokens/plasma_web` - **Config files:** 93 - **Written this run:** 0 -- **No `var(--*)` (unchanged / already migrated):** 81 -- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **No `var(--*)` (unchanged / already migrated):** 82 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 11 - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 -- **Configs importing theme:** 79 - -Skipped (manual / non-css configs) - -- `packages/plasma-web/src/components/Scrollbar/Scrollbar.config.ts` +- **Configs importing theme:** 80 +- **Configs with no theme import:** 13 **Unresolved variables (not written):** @@ -155,16 +144,13 @@ Skipped (manual / non-css configs) - **Config root:** `packages/plasma-new-hope/src/examples/components` - **Config files:** 103 - **Written this run:** 1 -- **No `var(--*)` (unchanged / already migrated):** 97 -- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **No `var(--*)` (unchanged / already migrated):** 98 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 4 - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 -- **Configs importing theme:** 95 - -Skipped (manual / non-css configs) - -- `packages/plasma-new-hope/src/examples/components/Scrollbar/Scrollbar.config.ts` +- **Configs importing theme:** 96 +- **Configs with no theme import:** 7 **Unresolved variables (not written):** @@ -185,6 +171,7 @@ Skipped (manual / non-css configs) - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 - **Configs importing theme:** 75 +- **Configs with no theme import:** 3 ### `sdds-crm` @@ -192,16 +179,13 @@ Skipped (manual / non-css configs) - **Import:** `@salutejs/sdds-themes/tokens/sdds_serv` - **Config files:** 77 - **Written this run:** 0 -- **No `var(--*)` (unchanged / already migrated):** 76 -- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **No `var(--*)` (unchanged / already migrated):** 77 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 0 - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 -- **Configs importing theme:** 73 - -Skipped (manual / non-css configs) - -- `packages/sdds-crm/src/components/Scrollbar/Scrollbar.config.ts` +- **Configs importing theme:** 74 +- **Configs with no theme import:** 3 ### `sdds-cs` @@ -215,6 +199,7 @@ Skipped (manual / non-css configs) - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 - **Configs importing theme:** 40 +- **Configs with no theme import:** 21 **Unresolved variables (not written):** @@ -249,6 +234,7 @@ Skipped (manual / non-css configs) - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 - **Configs importing theme:** 73 +- **Configs with no theme import:** 3 ### `sdds-finai` @@ -262,6 +248,7 @@ Skipped (manual / non-css configs) - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 - **Configs importing theme:** 70 +- **Configs with no theme import:** 4 **Unresolved variables (not written):** @@ -279,6 +266,7 @@ Skipped (manual / non-css configs) - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 - **Configs importing theme:** 70 +- **Configs with no theme import:** 6 **Unresolved variables (not written):** @@ -291,16 +279,13 @@ Skipped (manual / non-css configs) - **Import:** `@salutejs/plasma-themes/tokens/plasma_b2c` - **Config files:** 79 - **Written this run:** 0 -- **No `var(--*)` (unchanged / already migrated):** 78 -- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **No `var(--*)` (unchanged / already migrated):** 79 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 0 - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 -- **Configs importing theme:** 75 - -Skipped (manual / non-css configs) - -- `packages/sdds-netology/src/components/Scrollbar/Scrollbar.config.ts` +- **Configs importing theme:** 76 +- **Configs with no theme import:** 3 ### `sdds-os` @@ -308,16 +293,13 @@ Skipped (manual / non-css configs) - **Import:** `@salutejs/sdds-themes/tokens/sdds_os` - **Config files:** 55 - **Written this run:** 0 -- **No `var(--*)` (unchanged / already migrated):** 54 -- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **No `var(--*)` (unchanged / already migrated):** 55 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 0 - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 -- **Configs importing theme:** 52 - -Skipped (manual / non-css configs) - -- `packages/sdds-os/src/components/Scrollbar/Scrollbar.config.ts` +- **Configs importing theme:** 53 +- **Configs with no theme import:** 2 ### `sdds-platform-ai` @@ -325,16 +307,13 @@ Skipped (manual / non-css configs) - **Import:** `@salutejs/sdds-themes/tokens/sdds_platform_ai` - **Config files:** 64 - **Written this run:** 0 -- **No `var(--*)` (unchanged / already migrated):** 63 -- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **No `var(--*)` (unchanged / already migrated):** 64 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 0 - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 -- **Configs importing theme:** 62 - -Skipped (manual / non-css configs) - -- `packages/sdds-platform-ai/src/components/Scrollbar/Scrollbar.config.ts` +- **Configs importing theme:** 63 +- **Configs with no theme import:** 1 ### `sdds-sbcom` @@ -342,16 +321,13 @@ Skipped (manual / non-css configs) - **Import:** `@salutejs/sdds-themes/tokens/sdds_sbcom` - **Config files:** 78 - **Written this run:** 0 -- **No `var(--*)` (unchanged / already migrated):** 77 -- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **No `var(--*)` (unchanged / already migrated):** 78 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 0 - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 -- **Configs importing theme:** 73 - -Skipped (manual / non-css configs) - -- `packages/sdds-sbcom/src/components/Scrollbar/Scrollbar.config.ts` +- **Configs importing theme:** 74 +- **Configs with no theme import:** 4 ### `sdds-scan` @@ -359,16 +335,13 @@ Skipped (manual / non-css configs) - **Import:** `@salutejs/sdds-themes/tokens/sdds_scan` - **Config files:** 72 - **Written this run:** 0 -- **No `var(--*)` (unchanged / already migrated):** 71 -- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **No `var(--*)` (unchanged / already migrated):** 72 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 0 - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 -- **Configs importing theme:** 68 - -Skipped (manual / non-css configs) - -- `packages/sdds-scan/src/components/Scrollbar/Scrollbar.config.ts` +- **Configs importing theme:** 69 +- **Configs with no theme import:** 3 ### `sdds-serv` @@ -376,20 +349,17 @@ Skipped (manual / non-css configs) - **Import:** `@salutejs/sdds-themes/tokens/sdds_serv` - **Config files:** 79 - **Written this run:** 0 -- **No `var(--*)` (unchanged / already migrated):** 78 -- **Skipped (has CSS variables but no styled-components `css` template):** 1 +- **No `var(--*)` (unchanged / already migrated):** 79 +- **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 0 - **Failed (triple-dash, if any before fix pass):** 0 - **Errors:** 0 -- **Configs importing theme:** 75 - -Skipped (manual / non-css configs) - -- `packages/sdds-serv/src/components/Scrollbar/Scrollbar.config.ts` +- **Configs importing theme:** 76 +- **Configs with no theme import:** 3 ## Follow-up -- For **Scrollbar**-style configs (plain object + string colors, no styled-components css template), add theme imports manually (see `packages/plasma-giga/.../Scrollbar.config.ts`). +- **Scrollbar:** `Scrollbar/Scrollbar.config.ts` is handled by the migrator (quoted `var(--*)` → token imports). Other plain-object configs without `css` are still skipped unless added explicitly. - Run **ESLint with `--fix`** on touched packages if `import/order` or Prettier complain. - Re-run a single package: `node scripts/migrate-plasma-giga-config-tokens.mjs ` (profiles: `plasma-giga`, `sdds-sbcom`, …). @@ -397,4 +367,4 @@ Skipped (manual / non-css configs) - **Legacy plasma-web “Old” typography** (`--plasma-typo-body1-*`, `display1`, `headline1`, …): these names are **not** present as string exports in `plasma_web/index.ts` (the theme uses the newer `--plasma-typo-body-m-*` / `dspl-*` scale). Migrate those configs manually or point them at the correct token exports. - **Theme-specific gaps**: some packages reference CSS variables (e.g. `--surface-primary`, `--plasma-input-*`, `--overlay-soft`) that **do not appear** in the matching `tokens/*/index.ts` file. Add tokens upstream, or replace with the closest exported token after design review. -- `**--plasma-typo-*-bold-bold-*`\*\*: duplicated `bold` segment in the variable name; the migrator normalizes `-bold-bold-` → `-bold-` when resolving typography. +- **`--plasma-typo-*-bold-bold-*`**: duplicated `bold` segment in the variable name; the migrator normalizes `-bold-bold-` → `-bold-` when resolving typography. diff --git a/scripts/migrate-plasma-giga-config-tokens.mjs b/scripts/migrate-plasma-giga-config-tokens.mjs index 95b073ad3fa..3b69345a296 100644 --- a/scripts/migrate-plasma-giga-config-tokens.mjs +++ b/scripts/migrate-plasma-giga-config-tokens.mjs @@ -676,6 +676,9 @@ function formatReportMarkdown(batchResults, tripleDashFixes, generatedAt) { lines.push( '- **Configs importing theme:** count of `.config.ts` files under the config root whose source contains an import from that package’s theme module. Measured **after** the run; includes files not touched this run.', ); + lines.push( + '- **Configs with no theme import:** `Config files` minus `Configs importing theme` (e.g. empty configs, or configs that use another token source such as component-local tokens).', + ); lines.push(''); for (const r of batchResults) { lines.push(`### \`${r.profileKey}\``); @@ -702,6 +705,9 @@ function formatReportMarkdown(batchResults, tripleDashFixes, generatedAt) { r.profile.componentsRelative ?? 'src/components', ); lines.push(`- **Configs importing theme:** ${migratedConfigsCount}`); + lines.push( + `- **Configs with no theme import:** ${Math.max(0, r.totalConfigFiles - migratedConfigsCount)}`, + ); lines.push(''); if (r.skippedNoCss.length) { From 79abff03ede0e64ce2a88423e4303e413163d870 Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 22:42:00 +0300 Subject: [PATCH 22/24] fix(sdds-sbcom): replacing Text Tokens --- .../components/Accordion/Accordion.config.ts | 29 ++-- .../components/Calendar/Calendar.config.ts | 16 +- .../Calendar/CalendarDouble.config.ts | 16 +- .../DatePicker/DatePicker.clear.config.ts | 16 +- .../DatePicker/DatePicker.config.ts | 16 +- .../DateTimePicker/DateTimePicker.config.ts | 16 +- .../src/components/Loader/Loader.config.ts | 16 +- .../src/components/Note/Note.config.ts | 112 ++++++------- .../ProgressBarCircular.config.ts | 16 +- .../src/components/Rating/Rating.config.ts | 148 +++++++++--------- .../Skeleton/LineSkeleton.config.ts | 104 ++++++------ .../horizontal/HorizontalTabItem.config.ts | 36 ----- 12 files changed, 240 insertions(+), 301 deletions(-) diff --git a/packages/sdds-sbcom/src/components/Accordion/Accordion.config.ts b/packages/sdds-sbcom/src/components/Accordion/Accordion.config.ts index 2c3fac82aab..c81e6df89ba 100644 --- a/packages/sdds-sbcom/src/components/Accordion/Accordion.config.ts +++ b/packages/sdds-sbcom/src/components/Accordion/Accordion.config.ts @@ -13,10 +13,7 @@ import { h3Bold, h4, h4Bold, - h5, - h5Bold, - h6, - h6Bold, + h4Medium, surfaceAccent, surfaceClear, surfaceSolidCard, @@ -212,12 +209,12 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: ${h5.fontFamily}; - ${accordionTokens.accordionItemTitleFontSize}: ${h5.fontSize}; - ${accordionTokens.accordionItemTitleFontStyle}: ${h5.fontStyle}; - ${accordionTokens.accordionItemTitleFontWeight}: ${h5Bold.fontWeight}; - ${accordionTokens.accordionItemTitleLetterSpacing}: ${h5.letterSpacing}; - ${accordionTokens.accordionItemTitleLineHeight}: ${h5.lineHeight}; + ${accordionTokens.accordionItemTitleFontFamily}: ${h4Medium.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${h4Medium.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${h4Medium.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${h4Bold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${h4Medium.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${h4Medium.lineHeight}; ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; @@ -232,12 +229,12 @@ export const config = { ${accordionTokens.accordionItemGap}: 0.25rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; - ${accordionTokens.accordionItemTitleFontFamily}: ${h6.fontFamily}; - ${accordionTokens.accordionItemTitleFontSize}: ${h6.fontSize}; - ${accordionTokens.accordionItemTitleFontStyle}: ${h6.fontStyle}; - ${accordionTokens.accordionItemTitleFontWeight}: ${h6Bold.fontWeight}; - ${accordionTokens.accordionItemTitleLetterSpacing}: ${h6.letterSpacing}; - ${accordionTokens.accordionItemTitleLineHeight}: ${h6.lineHeight}; + ${accordionTokens.accordionItemTitleFontFamily}: ${bodyM.fontFamily}; + ${accordionTokens.accordionItemTitleFontSize}: ${bodyM.fontSize}; + ${accordionTokens.accordionItemTitleFontStyle}: ${bodyM.fontStyle}; + ${accordionTokens.accordionItemTitleFontWeight}: ${bodyMBold.fontWeight}; + ${accordionTokens.accordionItemTitleLetterSpacing}: ${bodyM.letterSpacing}; + ${accordionTokens.accordionItemTitleLineHeight}: ${bodyM.lineHeight}; ${accordionTokens.accordionItemTextFontFamily}: ${bodyM.fontFamily}; ${accordionTokens.accordionItemTextFontSize}: ${bodyM.fontSize}; diff --git a/packages/sdds-sbcom/src/components/Calendar/Calendar.config.ts b/packages/sdds-sbcom/src/components/Calendar/Calendar.config.ts index 0c3cd475c75..560072abfd5 100644 --- a/packages/sdds-sbcom/src/components/Calendar/Calendar.config.ts +++ b/packages/sdds-sbcom/src/components/Calendar/Calendar.config.ts @@ -11,8 +11,6 @@ import { h3Bold, h4, h4Bold, - h5, - h5Bold, inverseTextPrimary, shadowDownHardS, surfaceAccent, @@ -402,13 +400,13 @@ export const config = { ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarBaseTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; - ${calendarBaseTokens.calendarHeaderFontSize}: ${h5.fontSize}; - ${calendarBaseTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; - ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; - ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; - ${calendarBaseTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; - ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarBaseTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarBaseTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarBaseTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarBaseTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarBaseTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarBaseTokens.iconButtonHeight}: 2rem; ${calendarBaseTokens.iconButtonWidth}: 2rem; diff --git a/packages/sdds-sbcom/src/components/Calendar/CalendarDouble.config.ts b/packages/sdds-sbcom/src/components/Calendar/CalendarDouble.config.ts index 89c6700979e..bb002df1398 100644 --- a/packages/sdds-sbcom/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/sdds-sbcom/src/components/Calendar/CalendarDouble.config.ts @@ -11,8 +11,6 @@ import { h3Bold, h4, h4Bold, - h5, - h5Bold, inverseTextPrimary, shadowDownHardS, surfaceAccent, @@ -403,13 +401,13 @@ export const config = { ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; - ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h5.fontFamily}; - ${calendarDoubleTokens.calendarHeaderFontSize}: ${h5.fontSize}; - ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h5.fontStyle}; - ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; - ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; - ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h5.fontWeight}; - ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${calendarDoubleTokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${calendarDoubleTokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${calendarDoubleTokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${calendarDoubleTokens.iconButtonHeight}: 2rem; ${calendarDoubleTokens.iconButtonWidth}: 2rem; diff --git a/packages/sdds-sbcom/src/components/DatePicker/DatePicker.clear.config.ts b/packages/sdds-sbcom/src/components/DatePicker/DatePicker.clear.config.ts index 63c05a7808b..2216ca3c681 100644 --- a/packages/sdds-sbcom/src/components/DatePicker/DatePicker.clear.config.ts +++ b/packages/sdds-sbcom/src/components/DatePicker/DatePicker.clear.config.ts @@ -11,8 +11,6 @@ import { h3Bold, h4, h4Bold, - h5, - h5Bold, inverseTextPrimary, shadowDownHardM, shadowDownHardS, @@ -1016,13 +1014,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; - ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; - ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; - ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; - ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; - ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; - ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; diff --git a/packages/sdds-sbcom/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-sbcom/src/components/DatePicker/DatePicker.config.ts index d6a94e88163..ad3db746241 100644 --- a/packages/sdds-sbcom/src/components/DatePicker/DatePicker.config.ts +++ b/packages/sdds-sbcom/src/components/DatePicker/DatePicker.config.ts @@ -11,8 +11,6 @@ import { h3Bold, h4, h4Bold, - h5, - h5Bold, inverseTextPrimary, shadowDownHardM, shadowDownHardS, @@ -978,13 +976,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; - ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; - ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; - ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; - ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; - ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; - ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; diff --git a/packages/sdds-sbcom/src/components/DateTimePicker/DateTimePicker.config.ts b/packages/sdds-sbcom/src/components/DateTimePicker/DateTimePicker.config.ts index faeeaed079f..f584aa43768 100644 --- a/packages/sdds-sbcom/src/components/DateTimePicker/DateTimePicker.config.ts +++ b/packages/sdds-sbcom/src/components/DateTimePicker/DateTimePicker.config.ts @@ -11,8 +11,6 @@ import { h3Bold, h4, h4Bold, - h5, - h5Bold, inverseTextPrimary, shadowDownHardS, shadowDownSoftS, @@ -896,13 +894,13 @@ export const config = { ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; ${tokens.calendarHeaderDateGap}: 0.25rem; - ${tokens.calendarHeaderFontFamily}: ${h5.fontFamily}; - ${tokens.calendarHeaderFontSize}: ${h5.fontSize}; - ${tokens.calendarHeaderFontStyle}: ${h5.fontStyle}; - ${tokens.calendarHeaderFontLetterSpacing}: ${h5.letterSpacing}; - ${tokens.calendarHeaderFontLineHeight}: ${h5.lineHeight}; - ${tokens.calendarHeaderFontWeight}: ${h5.fontWeight}; - ${tokens.calendarHeaderFontWeightBold}: ${h5Bold.fontWeight}; + ${tokens.calendarHeaderFontFamily}: ${h4.fontFamily}; + ${tokens.calendarHeaderFontSize}: ${h4.fontSize}; + ${tokens.calendarHeaderFontStyle}: ${h4.fontStyle}; + ${tokens.calendarHeaderFontLetterSpacing}: ${h4.letterSpacing}; + ${tokens.calendarHeaderFontLineHeight}: ${h4.lineHeight}; + ${tokens.calendarHeaderFontWeight}: ${h4.fontWeight}; + ${tokens.calendarHeaderFontWeightBold}: ${h4Bold.fontWeight}; ${tokens.iconButtonHeight}: 2rem; ${tokens.iconButtonWidth}: 2rem; diff --git a/packages/sdds-sbcom/src/components/Loader/Loader.config.ts b/packages/sdds-sbcom/src/components/Loader/Loader.config.ts index 4cb79310652..775dc4cc4f0 100644 --- a/packages/sdds-sbcom/src/components/Loader/Loader.config.ts +++ b/packages/sdds-sbcom/src/components/Loader/Loader.config.ts @@ -6,8 +6,8 @@ import { bodyXXS, h2, h2Bold, - h5, - h5Bold, + h3, + h3Bold, overlaySoft, surfaceAccent, surfaceInfo, @@ -126,12 +126,12 @@ export const config = { ${loaderTokens.progressBarCircularWidth}: 5.5rem; ${loaderTokens.progressBarCircularStrokeWidth}: 0.25rem; ${loaderTokens.progressBarCircularStrokeSize}: 4; - ${loaderTokens.progressBarCircularContentFontFamily}: ${h5.fontFamily}; - ${loaderTokens.progressBarCircularContentFontSize}: ${h5.fontSize}; - ${loaderTokens.progressBarCircularContentFontStyle}: ${h5.fontStyle}; - ${loaderTokens.progressBarCircularContentFontWeight}: ${h5Bold.fontWeight}; - ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h5.letterSpacing}; - ${loaderTokens.progressBarCircularContentLineHeight}: ${h5.lineHeight}; + ${loaderTokens.progressBarCircularContentFontFamily}: ${h3.fontFamily}; + ${loaderTokens.progressBarCircularContentFontSize}: ${h3.fontSize}; + ${loaderTokens.progressBarCircularContentFontStyle}: ${h3.fontStyle}; + ${loaderTokens.progressBarCircularContentFontWeight}: ${h3Bold.fontWeight}; + ${loaderTokens.progressBarCircularContentLetterSpacing}: ${h3.letterSpacing}; + ${loaderTokens.progressBarCircularContentLineHeight}: ${h3.lineHeight}; ${loaderTokens.spinnerSize}: 5.5rem; `, diff --git a/packages/sdds-sbcom/src/components/Note/Note.config.ts b/packages/sdds-sbcom/src/components/Note/Note.config.ts index e31642927f2..00b1d5e28ba 100644 --- a/packages/sdds-sbcom/src/components/Note/Note.config.ts +++ b/packages/sdds-sbcom/src/components/Note/Note.config.ts @@ -1,24 +1,24 @@ import { + bodyL, + bodyLBold, + bodyM, + bodyMBold, + bodyS, + bodySBold, + bodyXS, + bodyXSBold, surfaceTransparentInfo, surfaceTransparentNegative, surfaceTransparentPositive, surfaceTransparentSecondary, surfaceTransparentWarning, textInfo, - textL, - textLBold, - textM, - textMBold, textNegative, textPositive, textPrimary, - textS, - textSBold, textSecondary, textSecondaryHover, textWarning, - textXS, - textXSBold, } from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, noteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; @@ -75,20 +75,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 2rem; ${tokens.fixedContentBeforePadding}: 0.25rem 0; - ${tokens.titleFontFamily}: ${textL.fontFamily}; - ${tokens.titleFontSize}: ${textL.fontSize}; - ${tokens.titleFontStyle}: ${textL.fontStyle}; - ${tokens.titleFontWeight}: ${textLBold.fontWeight}; - ${tokens.titleLetterSpacing}: ${textL.letterSpacing}; - ${tokens.titleLineHeight}: ${textL.lineHeight}; + ${tokens.titleFontFamily}: ${bodyL.fontFamily}; + ${tokens.titleFontSize}: ${bodyL.fontSize}; + ${tokens.titleFontStyle}: ${bodyL.fontStyle}; + ${tokens.titleFontWeight}: ${bodyLBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyL.lineHeight}; ${tokens.titlePaddingRight}: 1.875rem; - ${tokens.textFontFamily}: ${textL.fontFamily}; - ${tokens.textFontSize}: ${textL.fontSize}; - ${tokens.textFontStyle}: ${textL.fontStyle}; - ${tokens.textFontWeight}: ${textL.fontWeight}; - ${tokens.textLetterSpacing}: ${textL.letterSpacing}; - ${tokens.textLineHeight}: ${textL.lineHeight}; + ${tokens.textFontFamily}: ${bodyL.fontFamily}; + ${tokens.textFontSize}: ${bodyL.fontSize}; + ${tokens.textFontStyle}: ${bodyL.fontStyle}; + ${tokens.textFontWeight}: ${bodyL.fontWeight}; + ${tokens.textLetterSpacing}: ${bodyL.letterSpacing}; + ${tokens.textLineHeight}: ${bodyL.lineHeight}; `, m: css` ${tokens.padding}: 1.25rem 1.5rem; @@ -109,20 +109,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.5rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: ${textM.fontFamily}; - ${tokens.titleFontSize}: ${textM.fontSize}; - ${tokens.titleFontStyle}: ${textM.fontStyle}; - ${tokens.titleFontWeight}: ${textMBold.fontWeight}; - ${tokens.titleLetterSpacing}: ${textM.letterSpacing}; - ${tokens.titleLineHeight}: ${textM.lineHeight}; + ${tokens.titleFontFamily}: ${bodyM.fontFamily}; + ${tokens.titleFontSize}: ${bodyM.fontSize}; + ${tokens.titleFontStyle}: ${bodyM.fontStyle}; + ${tokens.titleFontWeight}: ${bodyMBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyM.lineHeight}; ${tokens.titlePaddingRight}: 1.75rem; - ${tokens.textFontFamily}: ${textM.fontFamily}; - ${tokens.textFontSize}: ${textM.fontSize}; - ${tokens.textFontStyle}: ${textM.fontStyle}; - ${tokens.textFontWeight}: ${textM.fontWeight}; - ${tokens.textLetterSpacing}: ${textM.letterSpacing}; - ${tokens.textLineHeight}: ${textM.lineHeight}; + ${tokens.textFontFamily}: ${bodyM.fontFamily}; + ${tokens.textFontSize}: ${bodyM.fontSize}; + ${tokens.textFontStyle}: ${bodyM.fontStyle}; + ${tokens.textFontWeight}: ${bodyM.fontWeight}; + ${tokens.textLetterSpacing}: ${bodyM.letterSpacing}; + ${tokens.textLineHeight}: ${bodyM.lineHeight}; `, s: css` ${tokens.padding}: 1rem 1.25rem; @@ -143,20 +143,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1.125rem; ${tokens.fixedContentBeforePadding}: 0.063rem 0; - ${tokens.titleFontFamily}: ${textS.fontFamily}; - ${tokens.titleFontSize}: ${textS.fontSize}; - ${tokens.titleFontStyle}: ${textS.fontStyle}; - ${tokens.titleFontWeight}: ${textSBold.fontWeight}; - ${tokens.titleLetterSpacing}: ${textS.letterSpacing}; - ${tokens.titleLineHeight}: ${textS.lineHeight}; + ${tokens.titleFontFamily}: ${bodyS.fontFamily}; + ${tokens.titleFontSize}: ${bodyS.fontSize}; + ${tokens.titleFontStyle}: ${bodyS.fontStyle}; + ${tokens.titleFontWeight}: ${bodySBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyS.lineHeight}; ${tokens.titlePaddingRight}: 1.625rem; - ${tokens.textFontFamily}: ${textS.fontFamily}; - ${tokens.textFontSize}: ${textS.fontSize}; - ${tokens.textFontStyle}: ${textS.fontStyle}; - ${tokens.textFontWeight}: ${textS.fontWeight}; - ${tokens.textLetterSpacing}: ${textS.letterSpacing}; - ${tokens.textLineHeight}: ${textS.lineHeight}; + ${tokens.textFontFamily}: ${bodyS.fontFamily}; + ${tokens.textFontSize}: ${bodyS.fontSize}; + ${tokens.textFontStyle}: ${bodyS.fontStyle}; + ${tokens.textFontWeight}: ${bodyS.fontWeight}; + ${tokens.textLetterSpacing}: ${bodyS.letterSpacing}; + ${tokens.textLineHeight}: ${bodyS.lineHeight}; `, xs: css` ${tokens.padding}: 0.75rem 1rem; @@ -177,20 +177,20 @@ export const config = { ${tokens.fixedContentBeforeHeight}: 1rem; ${tokens.fixedContentBeforePadding}: 0; - ${tokens.titleFontFamily}: ${textXS.fontFamily}; - ${tokens.titleFontSize}: ${textXS.fontSize}; - ${tokens.titleFontStyle}: ${textXS.fontStyle}; - ${tokens.titleFontWeight}: ${textXSBold.fontWeight}; - ${tokens.titleLetterSpacing}: ${textXS.letterSpacing}; - ${tokens.titleLineHeight}: ${textXS.lineHeight}; + ${tokens.titleFontFamily}: ${bodyXS.fontFamily}; + ${tokens.titleFontSize}: ${bodyXS.fontSize}; + ${tokens.titleFontStyle}: ${bodyXS.fontStyle}; + ${tokens.titleFontWeight}: ${bodyXSBold.fontWeight}; + ${tokens.titleLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.titleLineHeight}: ${bodyXS.lineHeight}; ${tokens.titlePaddingRight}: 1.5rem; - ${tokens.textFontFamily}: ${textXS.fontFamily}; - ${tokens.textFontSize}: ${textXS.fontSize}; - ${tokens.textFontStyle}: ${textXS.fontStyle}; - ${tokens.textFontWeight}: ${textXS.fontWeight}; - ${tokens.textLetterSpacing}: ${textXS.letterSpacing}; - ${tokens.textLineHeight}: ${textXS.lineHeight}; + ${tokens.textFontFamily}: ${bodyXS.fontFamily}; + ${tokens.textFontSize}: ${bodyXS.fontSize}; + ${tokens.textFontStyle}: ${bodyXS.fontStyle}; + ${tokens.textFontWeight}: ${bodyXS.fontWeight}; + ${tokens.textLetterSpacing}: ${bodyXS.letterSpacing}; + ${tokens.textLineHeight}: ${bodyXS.lineHeight}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/ProgressBarCircular/ProgressBarCircular.config.ts b/packages/sdds-sbcom/src/components/ProgressBarCircular/ProgressBarCircular.config.ts index e738bb8a2d2..49c15a32d72 100644 --- a/packages/sdds-sbcom/src/components/ProgressBarCircular/ProgressBarCircular.config.ts +++ b/packages/sdds-sbcom/src/components/ProgressBarCircular/ProgressBarCircular.config.ts @@ -6,8 +6,8 @@ import { bodyXXS, h2, h2Bold, - h5, - h5Bold, + h3, + h3Bold, surfaceAccent, surfaceInfo, surfaceNegative, @@ -83,12 +83,12 @@ export const config = { ${progressBarCircularTokens.width}: 5.5rem; ${progressBarCircularTokens.strokeWidth}: 0.25rem; ${progressBarCircularTokens.strokeSize}: 4; - ${progressBarCircularTokens.contentFontFamily}: ${h5.fontFamily}; - ${progressBarCircularTokens.contentFontSize}: ${h5.fontSize}; - ${progressBarCircularTokens.contentFontStyle}: ${h5.fontStyle}; - ${progressBarCircularTokens.contentFontWeight}: ${h5Bold.fontWeight}; - ${progressBarCircularTokens.contentLetterSpacing}: ${h5.letterSpacing}; - ${progressBarCircularTokens.contentLineHeight}: ${h5.lineHeight}; + ${progressBarCircularTokens.contentFontFamily}: ${h3.fontFamily}; + ${progressBarCircularTokens.contentFontSize}: ${h3.fontSize}; + ${progressBarCircularTokens.contentFontStyle}: ${h3.fontStyle}; + ${progressBarCircularTokens.contentFontWeight}: ${h3Bold.fontWeight}; + ${progressBarCircularTokens.contentLetterSpacing}: ${h3.letterSpacing}; + ${progressBarCircularTokens.contentLineHeight}: ${h3.lineHeight}; `, l: css` ${progressBarCircularTokens.size}: 56; diff --git a/packages/sdds-sbcom/src/components/Rating/Rating.config.ts b/packages/sdds-sbcom/src/components/Rating/Rating.config.ts index 975cdcc81fd..700a9cd068a 100644 --- a/packages/sdds-sbcom/src/components/Rating/Rating.config.ts +++ b/packages/sdds-sbcom/src/components/Rating/Rating.config.ts @@ -9,24 +9,16 @@ import { bodyXSBold, bodyXXS, bodyXXSBold, - dsplL, - dsplLBold, - dsplM, - dsplMBold, - dsplS, - dsplSBold, - h1, - h1Bold, - h2, - h2Bold, - h3, - h3Bold, - h4, - h4Bold, - h5, - h5Bold, - h6, - h6Bold, + dsplS as ratingDsplS, + dsplSBold as ratingDsplSBold, + h1 as ratingH1, + h1Bold as ratingH1Bold, + h2 as ratingH2, + h2Bold as ratingH2Bold, + h3 as ratingH3, + h3Bold as ratingH3Bold, + h4 as ratingH4, + h4Bold as ratingH4Bold, textPrimary, textSecondary, textTertiary, @@ -179,12 +171,12 @@ export const config = { h1: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: ${h1.fontFamily}; - ${tokens.fontSize}: ${h1.fontSize}; - ${tokens.fontStyle}: ${h1.fontStyle}; - ${tokens.fontWeight}: ${h1Bold.fontWeight}; - ${tokens.letterSpacing}: ${h1.letterSpacing}; - ${tokens.lineHeight}: ${h1.lineHeight}; + ${tokens.fontFamily}: ${ratingH1.fontFamily}; + ${tokens.fontSize}: ${ratingH1.fontSize}; + ${tokens.fontStyle}: ${ratingH1.fontStyle}; + ${tokens.fontWeight}: ${ratingH1Bold.fontWeight}; + ${tokens.letterSpacing}: ${ratingH1.letterSpacing}; + ${tokens.lineHeight}: ${ratingH1.lineHeight}; ${tokens.helperTextFontFamily}: ${bodyM.fontFamily}; ${tokens.helperTextFontSize}: ${bodyM.fontSize}; @@ -210,12 +202,12 @@ export const config = { h2: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: ${h2.fontFamily}; - ${tokens.fontSize}: ${h2.fontSize}; - ${tokens.fontStyle}: ${h2.fontStyle}; - ${tokens.fontWeight}: ${h2Bold.fontWeight}; - ${tokens.letterSpacing}: ${h2.letterSpacing}; - ${tokens.lineHeight}: ${h2.lineHeight}; + ${tokens.fontFamily}: ${ratingH2.fontFamily}; + ${tokens.fontSize}: ${ratingH2.fontSize}; + ${tokens.fontStyle}: ${ratingH2.fontStyle}; + ${tokens.fontWeight}: ${ratingH2Bold.fontWeight}; + ${tokens.letterSpacing}: ${ratingH2.letterSpacing}; + ${tokens.lineHeight}: ${ratingH2.lineHeight}; ${tokens.helperTextFontFamily}: ${bodyS.fontFamily}; ${tokens.helperTextFontSize}: ${bodyS.fontSize}; @@ -241,12 +233,12 @@ export const config = { h3: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: ${h3.fontFamily}; - ${tokens.fontSize}: ${h3.fontSize}; - ${tokens.fontStyle}: ${h3.fontStyle}; - ${tokens.fontWeight}: ${h3Bold.fontWeight}; - ${tokens.letterSpacing}: ${h3.letterSpacing}; - ${tokens.lineHeight}: ${h3.lineHeight}; + ${tokens.fontFamily}: ${ratingH3.fontFamily}; + ${tokens.fontSize}: ${ratingH3.fontSize}; + ${tokens.fontStyle}: ${ratingH3.fontStyle}; + ${tokens.fontWeight}: ${ratingH3Bold.fontWeight}; + ${tokens.letterSpacing}: ${ratingH3.letterSpacing}; + ${tokens.lineHeight}: ${ratingH3.lineHeight}; ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; @@ -272,12 +264,12 @@ export const config = { h4: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: ${h4.fontFamily}; - ${tokens.fontSize}: ${h4.fontSize}; - ${tokens.fontStyle}: ${h4.fontStyle}; - ${tokens.fontWeight}: ${h4Bold.fontWeight}; - ${tokens.letterSpacing}: ${h4.letterSpacing}; - ${tokens.lineHeight}: ${h4.lineHeight}; + ${tokens.fontFamily}: ${ratingH4.fontFamily}; + ${tokens.fontSize}: ${ratingH4.fontSize}; + ${tokens.fontStyle}: ${ratingH4.fontStyle}; + ${tokens.fontWeight}: ${ratingH4Bold.fontWeight}; + ${tokens.letterSpacing}: ${ratingH4.letterSpacing}; + ${tokens.lineHeight}: ${ratingH4.lineHeight}; ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; @@ -303,12 +295,12 @@ export const config = { h5: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: ${h5.fontFamily}; - ${tokens.fontSize}: ${h5.fontSize}; - ${tokens.fontStyle}: ${h5.fontStyle}; - ${tokens.fontWeight}: ${h5Bold.fontWeight}; - ${tokens.letterSpacing}: ${h5.letterSpacing}; - ${tokens.lineHeight}: ${h5.lineHeight}; + ${tokens.fontFamily}: ${ratingH3.fontFamily}; + ${tokens.fontSize}: ${ratingH3.fontSize}; + ${tokens.fontStyle}: ${ratingH3.fontStyle}; + ${tokens.fontWeight}: ${ratingH3Bold.fontWeight}; + ${tokens.letterSpacing}: ${ratingH3.letterSpacing}; + ${tokens.lineHeight}: ${ratingH3.lineHeight}; ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; @@ -334,12 +326,12 @@ export const config = { h6: css` ${tokens.gap}: 0.25rem; - ${tokens.fontFamily}: ${h6.fontFamily}; - ${tokens.fontSize}: ${h6.fontSize}; - ${tokens.fontStyle}: ${h6.fontStyle}; - ${tokens.fontWeight}: ${h6Bold.fontWeight}; - ${tokens.letterSpacing}: ${h6.letterSpacing}; - ${tokens.lineHeight}: ${h6.lineHeight}; + ${tokens.fontFamily}: ${bodyM.fontFamily}; + ${tokens.fontSize}: ${bodyM.fontSize}; + ${tokens.fontStyle}: ${bodyM.fontStyle}; + ${tokens.fontWeight}: ${bodyMBold.fontWeight}; + ${tokens.letterSpacing}: ${bodyM.letterSpacing}; + ${tokens.lineHeight}: ${bodyM.lineHeight}; ${tokens.helperTextFontFamily}: ${bodyXS.fontFamily}; ${tokens.helperTextFontSize}: ${bodyXS.fontSize}; @@ -365,19 +357,19 @@ export const config = { displayL: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: ${dsplL.fontFamily}; - ${tokens.fontSize}: ${dsplL.fontSize}; - ${tokens.fontStyle}: ${dsplL.fontStyle}; - ${tokens.fontWeight}: ${dsplLBold.fontWeight}; - ${tokens.letterSpacing}: ${dsplL.letterSpacing}; - ${tokens.lineHeight}: ${dsplL.lineHeight}; + ${tokens.fontFamily}: ${ratingH1.fontFamily}; + ${tokens.fontSize}: ${ratingH1.fontSize}; + ${tokens.fontStyle}: ${ratingH1.fontStyle}; + ${tokens.fontWeight}: ${ratingH1Bold.fontWeight}; + ${tokens.letterSpacing}: ${ratingH1.letterSpacing}; + ${tokens.lineHeight}: ${ratingH1.lineHeight}; - ${tokens.helperTextFontFamily}: ${h3.fontFamily}; - ${tokens.helperTextFontSize}: ${h3.fontSize}; - ${tokens.helperTextFontStyle}: ${h3.fontStyle}; - ${tokens.helperTextFontWeight}: ${h3.fontWeight}; - ${tokens.helperTextLetterSpacing}: ${h3.letterSpacing}; - ${tokens.helperTextLineHeight}: ${h3.lineHeight}; + ${tokens.helperTextFontFamily}: ${ratingH3.fontFamily}; + ${tokens.helperTextFontSize}: ${ratingH3.fontSize}; + ${tokens.helperTextFontStyle}: ${ratingH3.fontStyle}; + ${tokens.helperTextFontWeight}: ${ratingH3.fontWeight}; + ${tokens.helperTextLetterSpacing}: ${ratingH3.letterSpacing}; + ${tokens.helperTextLineHeight}: ${ratingH3.lineHeight}; ${tokens.contentGap}: 1.5rem; ${tokens.singleIconContentGap}: 0.75rem; @@ -396,12 +388,12 @@ export const config = { displayM: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: ${dsplM.fontFamily}; - ${tokens.fontSize}: ${dsplM.fontSize}; - ${tokens.fontStyle}: ${dsplM.fontStyle}; - ${tokens.fontWeight}: ${dsplMBold.fontWeight}; - ${tokens.letterSpacing}: ${dsplM.letterSpacing}; - ${tokens.lineHeight}: ${dsplM.lineHeight}; + ${tokens.fontFamily}: ${ratingH2.fontFamily}; + ${tokens.fontSize}: ${ratingH2.fontSize}; + ${tokens.fontStyle}: ${ratingH2.fontStyle}; + ${tokens.fontWeight}: ${ratingH2Bold.fontWeight}; + ${tokens.letterSpacing}: ${ratingH2.letterSpacing}; + ${tokens.lineHeight}: ${ratingH2.lineHeight}; ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; ${tokens.helperTextFontSize}: ${bodyL.fontSize}; @@ -427,12 +419,12 @@ export const config = { displayS: css` ${tokens.gap}: 0.375rem; - ${tokens.fontFamily}: ${dsplS.fontFamily}; - ${tokens.fontSize}: ${dsplS.fontSize}; - ${tokens.fontStyle}: ${dsplS.fontStyle}; - ${tokens.fontWeight}: ${dsplSBold.fontWeight}; - ${tokens.letterSpacing}: ${dsplS.letterSpacing}; - ${tokens.lineHeight}: ${dsplS.lineHeight}; + ${tokens.fontFamily}: ${ratingDsplS.fontFamily}; + ${tokens.fontSize}: ${ratingDsplS.fontSize}; + ${tokens.fontStyle}: ${ratingDsplS.fontStyle}; + ${tokens.fontWeight}: ${ratingDsplSBold.fontWeight}; + ${tokens.letterSpacing}: ${ratingDsplS.letterSpacing}; + ${tokens.lineHeight}: ${ratingDsplS.lineHeight}; ${tokens.helperTextFontFamily}: ${bodyL.fontFamily}; ${tokens.helperTextFontSize}: ${bodyL.fontSize}; diff --git a/packages/sdds-sbcom/src/components/Skeleton/LineSkeleton.config.ts b/packages/sdds-sbcom/src/components/Skeleton/LineSkeleton.config.ts index 0937735fdb6..759562d17a8 100644 --- a/packages/sdds-sbcom/src/components/Skeleton/LineSkeleton.config.ts +++ b/packages/sdds-sbcom/src/components/Skeleton/LineSkeleton.config.ts @@ -1,26 +1,22 @@ import { - bodyL, - bodyM, - bodyS, - bodyXS, - bodyXXS, - dsplL, - dsplM, - dsplS, - h1, - h2, - h3, - h4, - h5, - h6, + bodyL as typoBodyL, + bodyM as typoBodyM, + bodyM as typoH6Skeleton, + bodyS as typoBodyS, + bodyXS as typoBodyXS, + bodyXXS as typoBodyXXS, + dsplS as typoDsplS, + h1 as typoH1, + h2 as typoDsplL, + h2 as typoH2, + h3 as typoDsplM, + h3 as typoH3, + h4 as typoH4, + h4Medium as typoH5, surfaceSkeletonDeepGradient, surfaceSkeletonGradient, surfaceTransparentSecondary, surfaceTransparentTertiary, - textL, - textM, - textS, - textXS, } from '@salutejs/sdds-themes/tokens/sdds_sbcom'; import { css, skeletonTokens } from '@salutejs/plasma-new-hope/styled-components'; @@ -44,76 +40,76 @@ export const config = { }, size: { bodyL: css` - ${skeletonTokens.lineHeight}: ${bodyL.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${bodyL.fontSize}; + ${skeletonTokens.lineHeight}: ${typoBodyL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoBodyL.fontSize}; `, bodyM: css` - ${skeletonTokens.lineHeight}: ${bodyM.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${bodyM.fontSize}; + ${skeletonTokens.lineHeight}: ${typoBodyM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoBodyM.fontSize}; `, bodyS: css` - ${skeletonTokens.lineHeight}: ${bodyS.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${bodyS.fontSize}; + ${skeletonTokens.lineHeight}: ${typoBodyS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoBodyS.fontSize}; `, bodyXS: css` - ${skeletonTokens.lineHeight}: ${bodyXS.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${bodyXS.fontSize}; + ${skeletonTokens.lineHeight}: ${typoBodyXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoBodyXS.fontSize}; `, bodyXXS: css` - ${skeletonTokens.lineHeight}: ${bodyXXS.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${bodyXXS.fontSize}; + ${skeletonTokens.lineHeight}: ${typoBodyXXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoBodyXXS.fontSize}; `, dsplL: css` - ${skeletonTokens.lineHeight}: ${dsplL.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${dsplL.fontSize}; + ${skeletonTokens.lineHeight}: ${typoDsplL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoDsplL.fontSize}; `, dsplM: css` - ${skeletonTokens.lineHeight}: ${dsplM.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${dsplM.fontSize}; + ${skeletonTokens.lineHeight}: ${typoDsplM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoDsplM.fontSize}; `, dsplS: css` - ${skeletonTokens.lineHeight}: ${dsplS.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${dsplS.fontSize}; + ${skeletonTokens.lineHeight}: ${typoDsplS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoDsplS.fontSize}; `, h1: css` - ${skeletonTokens.lineHeight}: ${h1.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${h1.fontSize}; + ${skeletonTokens.lineHeight}: ${typoH1.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoH1.fontSize}; `, h2: css` - ${skeletonTokens.lineHeight}: ${h2.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${h2.fontSize}; + ${skeletonTokens.lineHeight}: ${typoH2.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoH2.fontSize}; `, h3: css` - ${skeletonTokens.lineHeight}: ${h3.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${h3.fontSize}; + ${skeletonTokens.lineHeight}: ${typoH3.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoH3.fontSize}; `, h4: css` - ${skeletonTokens.lineHeight}: ${h4.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${h4.fontSize}; + ${skeletonTokens.lineHeight}: ${typoH4.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoH4.fontSize}; `, h5: css` - ${skeletonTokens.lineHeight}: ${h5.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${h5.fontSize}; + ${skeletonTokens.lineHeight}: ${typoH5.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoH5.fontSize}; `, h6: css` - ${skeletonTokens.lineHeight}: ${h6.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${h6.fontSize}; + ${skeletonTokens.lineHeight}: ${typoH6Skeleton.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoH6Skeleton.fontSize}; `, textL: css` - ${skeletonTokens.lineHeight}: ${textL.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${textL.fontSize}; + ${skeletonTokens.lineHeight}: ${typoBodyL.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoBodyL.fontSize}; `, textM: css` - ${skeletonTokens.lineHeight}: ${textM.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${textM.fontSize}; + ${skeletonTokens.lineHeight}: ${typoBodyM.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoBodyM.fontSize}; `, textS: css` - ${skeletonTokens.lineHeight}: ${textS.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${textS.fontSize}; + ${skeletonTokens.lineHeight}: ${typoBodyS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoBodyS.fontSize}; `, textXS: css` - ${skeletonTokens.lineHeight}: ${textXS.lineHeight}; - ${skeletonTokens.visibleLineHeight}: ${textXS.fontSize}; + ${skeletonTokens.lineHeight}: ${typoBodyXS.lineHeight}; + ${skeletonTokens.visibleLineHeight}: ${typoBodyXS.fontSize}; `, }, }, diff --git a/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts b/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts index e06f2e2440d..71813180e6c 100644 --- a/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts +++ b/packages/sdds-sbcom/src/components/Tabs/horizontal/HorizontalTabItem.config.ts @@ -11,8 +11,6 @@ import { h2, h3, h4, - h5, - h6, inverseTextPrimary, inverseTextSecondary, surfaceAccent, @@ -215,40 +213,6 @@ export const config = { ${tabsTokens.actionContentMarginLeft}: 0.125rem; `, - h6: css` - ${tabsTokens.itemBorderRadius}: 0.375rem; - ${tabsTokens.itemWidth}: auto; - ${tabsTokens.itemHeight}: 3rem; - ${tabsTokens.itemPadding}: 0 0.125rem; - ${tabsTokens.itemMarginLeft}: 1.5rem; - ${tabsTokens.itemContentGap}: 0.625rem; - - ${tabsTokens.fontFamily}: ${h6.fontFamily}; - ${tabsTokens.fontSize}: ${h6.fontSize}; - ${tabsTokens.fontStyle}: ${h6.fontStyle}; - ${tabsTokens.fontWeight}: ${h6.fontWeight}; - ${tabsTokens.letterSpacing}: ${h6.letterSpacing}; - ${tabsTokens.lineHeight}: ${h6.lineHeight}; - - ${tabsTokens.actionContentMarginLeft}: -0.125rem; - `, - h5: css` - ${tabsTokens.itemBorderRadius}: 0.375rem; - ${tabsTokens.itemWidth}: auto; - ${tabsTokens.itemHeight}: 3rem; - ${tabsTokens.itemPadding}: 0 0.125rem; - ${tabsTokens.itemMarginLeft}: 1.5rem; - ${tabsTokens.itemContentGap}: 0.625rem; - - ${tabsTokens.fontFamily}: ${h5.fontFamily}; - ${tabsTokens.fontSize}: ${h5.fontSize}; - ${tabsTokens.fontStyle}: ${h5.fontStyle}; - ${tabsTokens.fontWeight}: ${h5.fontWeight}; - ${tabsTokens.letterSpacing}: ${h5.letterSpacing}; - ${tabsTokens.lineHeight}: ${h5.lineHeight}; - - ${tabsTokens.actionContentMarginLeft}: -0.125rem; - `, h4: css` ${tabsTokens.itemBorderRadius}: 0.375rem; ${tabsTokens.itemWidth}: auto; From 2be6648e5f5c68a06cf986206cb3fc56bf5e220c Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Fri, 27 Mar 2026 22:43:14 +0300 Subject: [PATCH 23/24] docs: improve migration --- TOKEN_MIGRATION_REPORT.md | 31 ++++++++++++------- scripts/migrate-plasma-giga-config-tokens.mjs | 22 +++++++++++++ 2 files changed, 42 insertions(+), 11 deletions(-) diff --git a/TOKEN_MIGRATION_REPORT.md b/TOKEN_MIGRATION_REPORT.md index 6cc98c83490..97d715f6aa8 100644 --- a/TOKEN_MIGRATION_REPORT.md +++ b/TOKEN_MIGRATION_REPORT.md @@ -1,12 +1,12 @@ # Token migration report -Generated: 2026-03-27T17:57:14.730Z (repo root: `scripts/migrate-plasma-giga-config-tokens.mjs --all`) +Generated: 2026-03-27T19:38:22.978Z (repo root: `scripts/migrate-plasma-giga-config-tokens.mjs --all`) ## Summary - **Packages in batch:** 17 - **Total `.config.ts` files scanned:** 1314 -- **Files updated in this run:** 1 (subsequent `--all` runs show **0** here if configs are already migrated; use git history for the first full pass) +- **Files updated in this run:** 5 (subsequent `--all` runs show **0** here if configs are already migrated; use git history for the first full pass) - **Triple-dash typo fixes in this run:** 0 files (`var(---x)` → `var(--x)`, only where matches existed) ## Theme / token mapping notes @@ -27,7 +27,7 @@ Generated: 2026-03-27T17:57:14.730Z (repo root: `scripts/migrate-plasma-giga-con | `sdds-netology` | `@salutejs/plasma-themes/tokens/plasma_b2c` | [#2642](https://github.com/salute-developers/plasma/pull/2642) | Package depends on @salutejs/plasma-themes; re-exports plasma_b2c (not sdds-themes). | | `sdds-os` | `@salutejs/sdds-themes/tokens/sdds_os` | [#2641](https://github.com/salute-developers/plasma/pull/2641) | — | | `sdds-platform-ai` | `@salutejs/sdds-themes/tokens/sdds_platform_ai` | [#2640](https://github.com/salute-developers/plasma/pull/2640) | — | -| `sdds-sbcom` | `@salutejs/sdds-themes/tokens/sdds_sbcom` | [#2639](https://github.com/salute-developers/plasma/pull/2639) | — | +| `sdds-sbcom` | `@salutejs/sdds-themes/tokens/sdds_sbcom` | [#2639](https://github.com/salute-developers/plasma/pull/2639) | Smaller typography/display surface than plasma-giga; see **§ sdds_sbcom theme surface & Linaria** in this report. | | `sdds-scan` | `@salutejs/sdds-themes/tokens/sdds_scan` | [#2653](https://github.com/salute-developers/plasma/pull/2653) | — | | `sdds-serv` | `@salutejs/sdds-themes/tokens/sdds_serv` | [#2654](https://github.com/salute-developers/plasma/pull/2654) | — | @@ -86,8 +86,8 @@ Other trees outside the batch (e.g. ad-hoc fixtures) may still contain `var(--- - **Token module:** `packages/themes/plasma-themes/src/tokens/plasma_b2c/index.ts` - **Import:** `@salutejs/plasma-themes/tokens/plasma_b2c` - **Config files:** 92 -- **Written this run:** 0 -- **No `var(--*)` (unchanged / already migrated):** 81 +- **Written this run:** 1 +- **No `var(--*)` (unchanged / already migrated):** 80 - **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 11 - **Failed (triple-dash, if any before fix pass):** 0 @@ -143,8 +143,8 @@ Other trees outside the batch (e.g. ad-hoc fixtures) may still contain `var(--- - **Import:** `@salutejs/plasma-themes/tokens/plasma_b2c` - **Config root:** `packages/plasma-new-hope/src/examples/components` - **Config files:** 103 -- **Written this run:** 1 -- **No `var(--*)` (unchanged / already migrated):** 98 +- **Written this run:** 2 +- **No `var(--*)` (unchanged / already migrated):** 97 - **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 4 - **Failed (triple-dash, if any before fix pass):** 0 @@ -334,8 +334,8 @@ Other trees outside the batch (e.g. ad-hoc fixtures) may still contain `var(--- - **Token module:** `packages/themes/sdds-themes/src/tokens/sdds_scan/index.ts` - **Import:** `@salutejs/sdds-themes/tokens/sdds_scan` - **Config files:** 72 -- **Written this run:** 0 -- **No `var(--*)` (unchanged / already migrated):** 72 +- **Written this run:** 1 +- **No `var(--*)` (unchanged / already migrated):** 71 - **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 0 - **Failed (triple-dash, if any before fix pass):** 0 @@ -348,8 +348,8 @@ Other trees outside the batch (e.g. ad-hoc fixtures) may still contain `var(--- - **Token module:** `packages/themes/sdds-themes/src/tokens/sdds_serv/index.ts` - **Import:** `@salutejs/sdds-themes/tokens/sdds_serv` - **Config files:** 79 -- **Written this run:** 0 -- **No `var(--*)` (unchanged / already migrated):** 79 +- **Written this run:** 1 +- **No `var(--*)` (unchanged / already migrated):** 78 - **Skipped (has CSS variables but no styled-components `css` template):** 0 - **Failed (unresolved vars):** 0 - **Failed (triple-dash, if any before fix pass):** 0 @@ -368,3 +368,12 @@ Other trees outside the batch (e.g. ad-hoc fixtures) may still contain `var(--- - **Legacy plasma-web “Old” typography** (`--plasma-typo-body1-*`, `display1`, `headline1`, …): these names are **not** present as string exports in `plasma_web/index.ts` (the theme uses the newer `--plasma-typo-body-m-*` / `dspl-*` scale). Migrate those configs manually or point them at the correct token exports. - **Theme-specific gaps**: some packages reference CSS variables (e.g. `--surface-primary`, `--plasma-input-*`, `--overlay-soft`) that **do not appear** in the matching `tokens/*/index.ts` file. Add tokens upstream, or replace with the closest exported token after design review. - **`--plasma-typo-*-bold-bold-*`**: duplicated `bold` segment in the variable name; the migrator normalizes `-bold-bold-` → `-bold-` when resolving typography. + +## `sdds_sbcom` theme surface & Linaria (`build:css`) + +Package **`sdds-sbcom`** runs **Linaria** over copied configs (`prebuild:css` → `src-css`). Static evaluation fails if imports are missing or **name-collide** with `variations` keys. + +- **Headings:** `sdds_sbcom` exports heading typography **`h1`–`h4` only** (plus bold/medium variants). There are **no `h5` / `h6` typography objects** — map UI sizes to **`h3`/`h4`**, **`h4Medium`**, or **`body*`** (confirm with design). +- **Display scale:** **`dsplS`** exists in `sdds_sbcom`; `dsplL` and `dsplM` **do not**. Use **`h1`/`h2`** (or another exported group) as stand-ins if configs expected a larger display step. +- **`textL` / `textM` / … vs colors:** In `sdds_sbcom`, names like **`textPrimary`** are **color** CSS variables, not typography groups. **`textL`-style font metrics** from plasma-giga-like configs should use **`bodyL`, `bodyM`, `bodyS`, `bodyXS`, …** from the same theme module. +- **Linaria + same identifier as variation key:** If a `variations` key matches an imported binding used in the same `css` template (e.g. size key `h6` with `${h6.fontFamily}`), static evaluation can yield **`undefined`**. Prefer **import aliases** that do not match keys (`typoBodyL`, `ratingH1`, `h4Medium as typoH5`). diff --git a/scripts/migrate-plasma-giga-config-tokens.mjs b/scripts/migrate-plasma-giga-config-tokens.mjs index 3b69345a296..932cc9db56f 100644 --- a/scripts/migrate-plasma-giga-config-tokens.mjs +++ b/scripts/migrate-plasma-giga-config-tokens.mjs @@ -61,6 +61,8 @@ const PROFILES = { pkgRoot: path.join(root, 'packages/sdds-sbcom'), tokensMod: sdds('sdds_sbcom'), importPath: '@salutejs/sdds-themes/tokens/sdds_sbcom', + tokenThemeNote: + 'Smaller typography/display surface than plasma-giga; see **§ sdds_sbcom theme surface & Linaria** in this report.', }, 'sdds-bizcom': { pkgRoot: path.join(root, 'packages/sdds-bizcom'), @@ -768,6 +770,26 @@ function formatReportMarkdown(batchResults, tripleDashFixes, generatedAt) { ); lines.push(''); + lines.push('## `sdds_sbcom` theme surface & Linaria (`build:css`)'); + lines.push(''); + lines.push( + 'Package **`sdds-sbcom`** runs **Linaria** over copied configs (`prebuild:css` → `src-css`). Static evaluation fails if imports are missing or **name-collide** with `variations` keys.', + ); + lines.push(''); + lines.push( + '- **Headings:** `sdds_sbcom` exports heading typography **`h1`–`h4` only** (plus bold/medium variants). There are **no `h5` / `h6` typography objects** — map UI sizes to **`h3`/`h4`**, **`h4Medium`**, or **`body*`** (confirm with design).', + ); + lines.push( + '- **Display scale:** **`dsplS`** exists in `sdds_sbcom`; `dsplL` and `dsplM` **do not**. Use **`h1`/`h2`** (or another exported group) as stand-ins if configs expected a larger display step.', + ); + lines.push( + '- **`textL` / `textM` / … vs colors:** In `sdds_sbcom`, names like **`textPrimary`** are **color** CSS variables, not typography groups. **`textL`-style font metrics** from plasma-giga-like configs should use **`bodyL`, `bodyM`, `bodyS`, `bodyXS`, …** from the same theme module.', + ); + lines.push( + '- **Linaria + same identifier as variation key:** If a `variations` key matches an imported binding used in the same `css` template (e.g. size key `h6` with `${h6.fontFamily}`), static evaluation can yield **`undefined`**. Prefer **import aliases** that do not match keys (`typoBodyL`, `ratingH1`, `h4Medium as typoH5`).', + ); + lines.push(''); + return lines.join('\n'); } From a3161548a3a78e44500178ff114e48740cfd78a8 Mon Sep 17 00:00:00 2001 From: Vasiliy Date: Thu, 9 Apr 2026 11:58:02 +0300 Subject: [PATCH 24/24] feat(token-explorer): created new service --- website/token-explorer/.gitignore | 3 + website/token-explorer/README.md | 33 + website/token-explorer/explorer.config.json | 47 + website/token-explorer/index.html | 12 + website/token-explorer/package-lock.json | 882 ++++++++++++++++++ website/token-explorer/package.json | 25 + .../token-explorer/scripts/generate-data.mjs | 554 +++++++++++ website/token-explorer/src/App.tsx | 827 ++++++++++++++++ website/token-explorer/src/index.css | 385 ++++++++ website/token-explorer/src/main.tsx | 10 + website/token-explorer/src/types.ts | 43 + website/token-explorer/src/vite-env.d.ts | 1 + website/token-explorer/tsconfig.json | 24 + website/token-explorer/tsconfig.node.json | 12 + website/token-explorer/vite.config.ts | 12 + 15 files changed, 2870 insertions(+) create mode 100644 website/token-explorer/.gitignore create mode 100644 website/token-explorer/README.md create mode 100644 website/token-explorer/explorer.config.json create mode 100644 website/token-explorer/index.html create mode 100644 website/token-explorer/package-lock.json create mode 100644 website/token-explorer/package.json create mode 100644 website/token-explorer/scripts/generate-data.mjs create mode 100644 website/token-explorer/src/App.tsx create mode 100644 website/token-explorer/src/index.css create mode 100644 website/token-explorer/src/main.tsx create mode 100644 website/token-explorer/src/types.ts create mode 100644 website/token-explorer/src/vite-env.d.ts create mode 100644 website/token-explorer/tsconfig.json create mode 100644 website/token-explorer/tsconfig.node.json create mode 100644 website/token-explorer/vite.config.ts diff --git a/website/token-explorer/.gitignore b/website/token-explorer/.gitignore new file mode 100644 index 00000000000..a2e859652ab --- /dev/null +++ b/website/token-explorer/.gitignore @@ -0,0 +1,3 @@ +node_modules +dist +public/token-explorer.data.json diff --git a/website/token-explorer/README.md b/website/token-explorer/README.md new file mode 100644 index 00000000000..64f19bb1cea --- /dev/null +++ b/website/token-explorer/README.md @@ -0,0 +1,33 @@ +# Design token explorer + +Browse theme tokens from `plasma-themes` / `sdds-themes` and see where they appear in component `*.config.ts` files (`plasma-giga`, `sdds-sbcom`, `sdds-serv`). The **design system** selector scopes tokens, usages, components, and gaps to one package. + +## Setup + +```bash +cd website/token-explorer +npm install +``` + +## Run + +```bash +npm run dev +``` + +`predev` runs `generate:data` and writes `public/token-explorer.data.json` (paths resolve to the monorepo root: two levels above this folder). + +## Build + +```bash +npm run build +npm run preview +``` + +## Data only + +```bash +npm run generate:data +``` + +Generated JSON is gitignored. Edit `explorer.config.json` to add packages or design systems. diff --git a/website/token-explorer/explorer.config.json b/website/token-explorer/explorer.config.json new file mode 100644 index 00000000000..2f0f1a8b3ad --- /dev/null +++ b/website/token-explorer/explorer.config.json @@ -0,0 +1,47 @@ +{ + "componentPackages": [ + { + "name": "plasma-giga", + "path": "packages/plasma-giga", + "configGlob": "src/components/**/*.config.ts" + }, + { + "name": "sdds-sbcom", + "path": "packages/sdds-sbcom", + "configGlob": "src/components/**/*.config.ts" + }, + { + "name": "sdds-serv", + "path": "packages/sdds-serv", + "configGlob": "src/components/**/*.config.ts" + } + ], + "designSystems": [ + { + "id": "plasma-giga", + "label": "Plasma Giga", + "package": "plasma-giga", + "tokenSlugs": ["plasma_giga"] + }, + { + "id": "sdds-sbcom", + "label": "SDDS SBCom", + "package": "sdds-sbcom", + "tokenSlugs": ["sdds_sbcom"] + }, + { + "id": "sdds-serv", + "label": "SDDS Serv", + "package": "sdds-serv", + "tokenSlugs": ["sdds_serv"] + } + ], + "themeRoots": { + "plasma-themes": "packages/themes/plasma-themes/src/tokens", + "sdds-themes": "packages/themes/sdds-themes/src/tokens" + }, + "importPathToTheme": { + "@salutejs/plasma-themes/tokens/": "plasma-themes", + "@salutejs/sdds-themes/tokens/": "sdds-themes" + } +} diff --git a/website/token-explorer/index.html b/website/token-explorer/index.html new file mode 100644 index 00000000000..0e1e0915a67 --- /dev/null +++ b/website/token-explorer/index.html @@ -0,0 +1,12 @@ + + + + + + Plasma design token explorer + + +
+ + + diff --git a/website/token-explorer/package-lock.json b/website/token-explorer/package-lock.json new file mode 100644 index 00000000000..8731cc40ab7 --- /dev/null +++ b/website/token-explorer/package-lock.json @@ -0,0 +1,882 @@ +{ + "name": "@plasma/token-explorer", + "version": "0.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "@plasma/token-explorer", + "version": "0.0.0", + "dependencies": { + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "devDependencies": { + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", + "@vitejs/plugin-react": "^4.3.3", + "typescript": "~5.6.3", + "vite": "^5.4.10" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.29.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-validator-identifier": "^7.28.5", + "js-tokens": "^4.0.0", + "picocolors": "^1.1.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.29.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.29.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.0", + "@babel/generator": "^7.29.0", + "@babel/helper-compilation-targets": "^7.28.6", + "@babel/helper-module-transforms": "^7.28.6", + "@babel/helpers": "^7.28.6", + "@babel/parser": "^7.29.0", + "@babel/template": "^7.28.6", + "@babel/traverse": "^7.29.0", + "@babel/types": "^7.29.0", + "@jridgewell/remapping": "^2.3.5", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/generator": { + "version": "7.29.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.0", + "@babel/types": "^7.29.0", + "@jridgewell/gen-mapping": "^0.3.12", + "@jridgewell/trace-mapping": "^0.3.28", + "jsesc": "^3.0.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.28.6", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/compat-data": "^7.28.6", + "@babel/helper-validator-option": "^7.27.1", + "browserslist": "^4.24.0", + "lru-cache": "^5.1.1", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-globals": { + "version": "7.28.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.28.6", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/traverse": "^7.28.6", + "@babel/types": "^7.28.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.28.6", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.28.6", + "@babel/helper-validator-identifier": "^7.28.5", + "@babel/traverse": "^7.28.6" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.28.6", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.27.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.28.5", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.27.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.29.2", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/template": "^7.28.6", + "@babel/types": "^7.29.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.29.2", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.0" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-self": { + "version": "7.27.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.27.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-source": { + "version": "7.27.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.27.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/template": { + "version": "7.28.6", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.28.6", + "@babel/parser": "^7.28.6", + "@babel/types": "^7.28.6" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.29.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.0", + "@babel/generator": "^7.29.0", + "@babel/helper-globals": "^7.28.0", + "@babel/parser": "^7.29.0", + "@babel/template": "^7.28.6", + "@babel/types": "^7.29.0", + "debug": "^4.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/types": { + "version": "7.29.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^7.27.1", + "@babel/helper-validator-identifier": "^7.28.5" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.21.5", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.13", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/remapping": { + "version": "2.3.5", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.5", + "dev": true, + "license": "MIT" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.31", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "node_modules/@rolldown/pluginutils": { + "version": "1.0.0-beta.27", + "dev": true, + "license": "MIT" + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.60.0", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@types/babel__core": { + "version": "7.20.5", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.20.7", + "@babel/types": "^7.20.7", + "@types/babel__generator": "*", + "@types/babel__template": "*", + "@types/babel__traverse": "*" + } + }, + "node_modules/@types/babel__generator": { + "version": "7.27.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__template": { + "version": "7.4.4", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.1.0", + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__traverse": { + "version": "7.28.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.28.2" + } + }, + "node_modules/@types/estree": { + "version": "1.0.8", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/prop-types": { + "version": "15.7.15", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/react": { + "version": "18.3.28", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.2.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.3.7", + "dev": true, + "license": "MIT", + "peerDependencies": { + "@types/react": "^18.0.0" + } + }, + "node_modules/@vitejs/plugin-react": { + "version": "4.7.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "^7.28.0", + "@babel/plugin-transform-react-jsx-self": "^7.27.1", + "@babel/plugin-transform-react-jsx-source": "^7.27.1", + "@rolldown/pluginutils": "1.0.0-beta.27", + "@types/babel__core": "^7.20.5", + "react-refresh": "^0.17.0" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" + } + }, + "node_modules/baseline-browser-mapping": { + "version": "2.10.11", + "dev": true, + "license": "Apache-2.0", + "bin": { + "baseline-browser-mapping": "dist/cli.cjs" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/browserslist": { + "version": "4.28.1", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "baseline-browser-mapping": "^2.9.0", + "caniuse-lite": "^1.0.30001759", + "electron-to-chromium": "^1.5.263", + "node-releases": "^2.0.27", + "update-browserslist-db": "^1.2.0" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001781", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "CC-BY-4.0" + }, + "node_modules/convert-source-map": { + "version": "2.0.0", + "dev": true, + "license": "MIT" + }, + "node_modules/csstype": { + "version": "3.2.3", + "dev": true, + "license": "MIT" + }, + "node_modules/debug": { + "version": "4.4.3", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/electron-to-chromium": { + "version": "1.5.328", + "dev": true, + "license": "ISC" + }, + "node_modules/esbuild": { + "version": "0.21.5", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.21.5", + "@esbuild/android-arm": "0.21.5", + "@esbuild/android-arm64": "0.21.5", + "@esbuild/android-x64": "0.21.5", + "@esbuild/darwin-arm64": "0.21.5", + "@esbuild/darwin-x64": "0.21.5", + "@esbuild/freebsd-arm64": "0.21.5", + "@esbuild/freebsd-x64": "0.21.5", + "@esbuild/linux-arm": "0.21.5", + "@esbuild/linux-arm64": "0.21.5", + "@esbuild/linux-ia32": "0.21.5", + "@esbuild/linux-loong64": "0.21.5", + "@esbuild/linux-mips64el": "0.21.5", + "@esbuild/linux-ppc64": "0.21.5", + "@esbuild/linux-riscv64": "0.21.5", + "@esbuild/linux-s390x": "0.21.5", + "@esbuild/linux-x64": "0.21.5", + "@esbuild/netbsd-x64": "0.21.5", + "@esbuild/openbsd-x64": "0.21.5", + "@esbuild/sunos-x64": "0.21.5", + "@esbuild/win32-arm64": "0.21.5", + "@esbuild/win32-ia32": "0.21.5", + "@esbuild/win32-x64": "0.21.5" + } + }, + "node_modules/escalade": { + "version": "3.2.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "license": "MIT" + }, + "node_modules/jsesc": { + "version": "3.1.0", + "dev": true, + "license": "MIT", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/json5": { + "version": "2.2.3", + "dev": true, + "license": "MIT", + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "license": "MIT", + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/lru-cache": { + "version": "5.1.1", + "dev": true, + "license": "ISC", + "dependencies": { + "yallist": "^3.0.2" + } + }, + "node_modules/ms": { + "version": "2.1.3", + "dev": true, + "license": "MIT" + }, + "node_modules/nanoid": { + "version": "3.3.11", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/node-releases": { + "version": "2.0.36", + "dev": true, + "license": "MIT" + }, + "node_modules/picocolors": { + "version": "1.1.1", + "dev": true, + "license": "ISC" + }, + "node_modules/postcss": { + "version": "8.5.8", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.11", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/react": { + "version": "18.3.1", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "18.3.1", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + }, + "peerDependencies": { + "react": "^18.3.1" + } + }, + "node_modules/react-refresh": { + "version": "0.17.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/rollup": { + "version": "4.60.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "1.0.8" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.60.0", + "@rollup/rollup-android-arm64": "4.60.0", + "@rollup/rollup-darwin-arm64": "4.60.0", + "@rollup/rollup-darwin-x64": "4.60.0", + "@rollup/rollup-freebsd-arm64": "4.60.0", + "@rollup/rollup-freebsd-x64": "4.60.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.60.0", + "@rollup/rollup-linux-arm-musleabihf": "4.60.0", + "@rollup/rollup-linux-arm64-gnu": "4.60.0", + "@rollup/rollup-linux-arm64-musl": "4.60.0", + "@rollup/rollup-linux-loong64-gnu": "4.60.0", + "@rollup/rollup-linux-loong64-musl": "4.60.0", + "@rollup/rollup-linux-ppc64-gnu": "4.60.0", + "@rollup/rollup-linux-ppc64-musl": "4.60.0", + "@rollup/rollup-linux-riscv64-gnu": "4.60.0", + "@rollup/rollup-linux-riscv64-musl": "4.60.0", + "@rollup/rollup-linux-s390x-gnu": "4.60.0", + "@rollup/rollup-linux-x64-gnu": "4.60.0", + "@rollup/rollup-linux-x64-musl": "4.60.0", + "@rollup/rollup-openbsd-x64": "4.60.0", + "@rollup/rollup-openharmony-arm64": "4.60.0", + "@rollup/rollup-win32-arm64-msvc": "4.60.0", + "@rollup/rollup-win32-ia32-msvc": "4.60.0", + "@rollup/rollup-win32-x64-gnu": "4.60.0", + "@rollup/rollup-win32-x64-msvc": "4.60.0", + "fsevents": "~2.3.2" + } + }, + "node_modules/scheduler": { + "version": "0.23.2", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0" + } + }, + "node_modules/semver": { + "version": "6.3.1", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/typescript": { + "version": "5.6.3", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/update-browserslist-db": { + "version": "1.2.3", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "escalade": "^3.2.0", + "picocolors": "^1.1.1" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, + "node_modules/vite": { + "version": "5.4.21", + "dev": true, + "license": "MIT", + "dependencies": { + "esbuild": "^0.21.3", + "postcss": "^8.4.43", + "rollup": "^4.20.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^18.0.0 || >=20.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^18.0.0 || >=20.0.0", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "sass-embedded": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, + "node_modules/yallist": { + "version": "3.1.1", + "dev": true, + "license": "ISC" + } + } +} diff --git a/website/token-explorer/package.json b/website/token-explorer/package.json new file mode 100644 index 00000000000..8b43c09e434 --- /dev/null +++ b/website/token-explorer/package.json @@ -0,0 +1,25 @@ +{ + "name": "@plasma/token-explorer", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "generate:data": "node scripts/generate-data.mjs", + "predev": "npm run generate:data", + "dev": "vite", + "prebuild": "npm run generate:data", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "devDependencies": { + "@types/react": "^18.3.12", + "@types/react-dom": "^18.3.1", + "@vitejs/plugin-react": "^4.3.3", + "typescript": "~5.6.3", + "vite": "^5.4.10" + } +} diff --git a/website/token-explorer/scripts/generate-data.mjs b/website/token-explorer/scripts/generate-data.mjs new file mode 100644 index 00000000000..4ee550291e1 --- /dev/null +++ b/website/token-explorer/scripts/generate-data.mjs @@ -0,0 +1,554 @@ +/** + * Builds public/token-explorer.data.json from theme token index files and component configs. + */ +import * as fs from 'node:fs'; +import * as path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const SITE_ROOT = path.join(__dirname, '..'); +const REPO_ROOT = path.join(SITE_ROOT, '..', '..'); +const CONFIG_PATH = path.join(SITE_ROOT, 'explorer.config.json'); +const OUT_PATH = path.join(SITE_ROOT, 'public', 'token-explorer.data.json'); + +/** @typedef {{ name: string; path: string; configGlob?: string }} ComponentPackage */ +/** @typedef {{ id: string; label: string; package: string; tokenSlugs: string[] }} DesignSystem */ +/** @typedef {{ componentPackages: ComponentPackage[]; designSystems?: DesignSystem[]; themeRoots: Record; importPathToTheme: Record }} ExplorerConfig */ + +function readJson(p) { + return JSON.parse(fs.readFileSync(p, 'utf8')); +} + +function walkFiles(dir, predicate) { + const out = []; + if (!fs.existsSync(dir)) return out; + for (const name of fs.readdirSync(dir)) { + const p = path.join(dir, name); + const st = fs.statSync(p); + if (st.isDirectory()) out.push(...walkFiles(p, predicate)); + else if (predicate(p)) out.push(p); + } + return out; +} + +function findConfigFiles(pkgAbs) { + const components = path.join(pkgAbs, 'src', 'components'); + return walkFiles(components, (p) => p.endsWith('.config.ts')); +} + +/** + * @param {string} exportName + * @param {string} cssVar + */ +function categorize(exportName, cssVar) { + const ev = exportName.toLowerCase(); + const cv = cssVar.toLowerCase(); + + if (ev.startsWith('ondark') || cv.includes('on-dark')) { + return { category: 'colors', colorSubgroup: 'onDark' }; + } + if (ev.startsWith('onlight') || cv.includes('on-light')) { + return { category: 'colors', colorSubgroup: 'onLight' }; + } + if (ev === 'inversebackgroundprimary') { + return { category: 'other', colorSubgroup: null }; + } + if (ev.startsWith('inverse') || cv.startsWith('--inverse')) { + return { category: 'colors', colorSubgroup: 'inverse' }; + } + + if (ev.startsWith('data') || /^--data-/.test(cv)) { + return { category: 'colors', colorSubgroup: 'default' }; + } + + if ( + /--plasma-typo-/.test(cv) || + /\.(fontfamily|fontsize|fontweight|fontstyle|letterspacing|lineheight)$/i.test(exportName) + ) { + return { category: 'typography', colorSubgroup: null }; + } + + if ( + /^(text|surface|outline|overlay)/.test(ev) || + /^--(text|surface|outline|overlay)-/.test(cv) || + ev.includes('gradient') || + cv.includes('gradient') + ) { + return { category: 'colors', colorSubgroup: 'default' }; + } + + if (/^border[rR]adius|^borderradius/.test(ev) || /--border-radius-/.test(cv)) { + return { category: 'borderRadii', colorSubgroup: null }; + } + if (/^shadow/.test(ev) || /--shadow-/.test(cv)) { + return { category: 'shadows', colorSubgroup: null }; + } + if (ev.startsWith('spacing') || /^--spacing-/.test(cv)) { + return { category: 'spaces', colorSubgroup: null }; + } + + return { category: 'other', colorSubgroup: null }; +} + +/** + * @param {string} filePath + * @param {string} themePackage + * @param {string} slug + */ +function parseTokenIndexFile(filePath, themePackage, slug) { + const src = fs.readFileSync(filePath, 'utf8'); + /** @type {any[]} */ + const tokens = []; + /** @type {Map} */ + const cssVarToIds = new Map(); + /** @type {Map} */ + const exportToId = new Map(); + + const addToken = (t) => { + tokens.push(t); + exportToId.set(t.exportName, t.id); + if (!cssVarToIds.has(t.cssVar)) cssVarToIds.set(t.cssVar, []); + cssVarToIds.get(t.cssVar).push(t.id); + }; + + const stringRe = /export const (\w+) =[\s\n]*'([^']+)'/gs; + let m; + while ((m = stringRe.exec(src)) !== null) { + const exportName = m[1]; + const full = m[2]; + const vm = full.match(/^var\((--[^,)]+)/); + if (!vm) continue; + const cssVar = vm[1]; + const { category, colorSubgroup } = categorize(exportName, cssVar); + const id = `${themePackage}::${slug}::${exportName}`; + addToken({ + id, + exportName, + cssVar, + valuePreview: full.length > 120 ? `${full.slice(0, 117)}…` : full, + category, + colorSubgroup, + themePackage, + slug, + }); + } + + const objRe = /export const (\w+) = \{([^}]+)\};/gs; + while ((m = objRe.exec(src)) !== null) { + const baseName = m[1]; + const body = m[2]; + if (!body.includes('plasma-typo') && !body.includes('var(--')) continue; + const propRe = /(\w+):\s*'var\((--[^,)]+)[^']*'/g; + let pm; + while ((pm = propRe.exec(body)) !== null) { + const prop = pm[1]; + const cssVar = pm[2]; + const exportName = `${baseName}.${prop}`; + const { category, colorSubgroup } = categorize(exportName, cssVar); + const id = `${themePackage}::${slug}::${exportName}`; + const fullMatch = pm[0].match(/'([^']+)'/); + const valuePreview = fullMatch ? fullMatch[1] : cssVar; + addToken({ + id, + exportName, + cssVar, + valuePreview: valuePreview.length > 120 ? `${valuePreview.slice(0, 117)}…` : valuePreview, + category, + colorSubgroup, + themePackage, + slug, + }); + } + } + + return { tokens, cssVarToIds, exportToId, filePath }; +} + +const IMPORT_NAMED_RE = + /import\s*\{([\s\S]*?)\}\s*from\s*['"]@salutejs\/(plasma-themes|sdds-themes)\/tokens\/(\w+)['"]/g; +const IMPORT_DEFAULT_RE = + /import\s+(\w+)\s+from\s*['"]@salutejs\/(plasma-themes|sdds-themes)\/tokens\/(\w+)['"]/g; + +/** + * @returns {Map} local name -> registries + */ +function parseImports(source) { + /** @type {Map} */ + const map = new Map(); + let m; + while ((m = IMPORT_NAMED_RE.exec(source)) !== null) { + const names = m[1] + .split(',') + .map((s) => s.trim().split(/\s+as\s+/)[0].trim()) + .filter(Boolean); + const themePkg = m[2]; + const slug = m[3]; + for (const n of names) { + if (!map.has(n)) map.set(n, []); + map.get(n).push({ themePackage: themePkg, slug }); + } + } + while ((m = IMPORT_DEFAULT_RE.exec(source)) !== null) { + const n = m[1].trim(); + const themePkg = m[2]; + const slug = m[3]; + if (!map.has(n)) map.set(n, []); + map.get(n).push({ themePackage: themePkg, slug }); + } + return map; +} + +/** + * @param {string} source + */ +function extractCssTemplates(source) { + const blocks = []; + let searchFrom = 0; + while (searchFrom < source.length) { + const idx = source.indexOf('css`', searchFrom); + if (idx === -1) break; + const before = idx > 0 ? source[idx - 1] : ' '; + if (/\w/.test(before)) { + searchFrom = idx + 4; + continue; + } + const start = idx + 4; + let i = start; + let depth = 1; + while (i < source.length && depth > 0) { + const ch = source[i]; + if (ch === '`' && source[i - 1] !== '\\') { + depth--; + if (depth === 0) { + blocks.push({ + content: source.slice(start, i), + startLine: source.slice(0, start).split('\n').length, + }); + searchFrom = i + 1; + break; + } + i++; + continue; + } + if (ch === '$' && source[i + 1] === '{') { + let brace = 1; + i += 2; + while (i < source.length && brace > 0) { + if (source[i] === '{') brace++; + else if (source[i] === '}') brace--; + i++; + } + continue; + } + i++; + } + if (depth > 0) { + searchFrom = idx + 4; + } + } + return blocks; +} + +/** + * @param {string} css + * @param {number} lineOffset + */ +function extractVars(css, lineOffset) { + const found = []; + let i = 0; + while (i < css.length) { + const vi = css.indexOf('var(', i); + if (vi === -1) break; + let j = vi + 4; + let depth = 1; + while (j < css.length && depth > 0) { + if (css[j] === '(') depth++; + else if (css[j] === ')') depth--; + j++; + } + const inner = css.slice(vi + 4, j - 1); + const nm = inner.match(/^(\s*--[a-z0-9-]+)/i); + if (nm) { + const cssVar = nm[1].trim(); + const line = lineOffset + css.slice(0, vi).split('\n').length - 1; + const raw = css.slice(vi, j); + found.push({ type: 'var', cssVar, line, raw }); + } + i = j; + } + return found; +} + +/** + * @param {string} css + * @param {number} lineOffset + */ +function extractTemplates(css, lineOffset) { + const found = []; + const re = /\$\{([^}]+)\}/g; + let m; + while ((m = re.exec(css)) !== null) { + const expr = m[1].trim(); + if (/^tokens\./.test(expr) || /^accordionTokens\./.test(expr) || /Tokens\./.test(expr)) continue; + const line = lineOffset + css.slice(0, m.index).split('\n').length - 1; + found.push({ type: 'template', expr, line, raw: m[0] }); + } + return found; +} + +const LITERAL_RE = /\b\d+\.?\d*(rem|px|em|%)\b/g; + +/** + * @param {string} css + * @param {number} lineOffset + */ +function extractLiterals(css, lineOffset) { + const found = []; + let m; + const re = new RegExp(LITERAL_RE.source, 'g'); + while ((m = re.exec(css)) !== null) { + const line = lineOffset + css.slice(0, m.index).split('\n').length - 1; + found.push({ type: 'literal', raw: m[0], line }); + } + return found; +} + +/** + * @param {Map} registries key themePackage::slug + */ +function scanConfigFile(absPath, relPath, packageName, registries) { + const source = fs.readFileSync(absPath, 'utf8'); + const imports = parseImports(source); + const slugsInFile = new Set(); + for (const [, refs] of imports) { + for (const r of refs) { + slugsInFile.add(`${r.themePackage}::${r.slug}`); + } + } + + /** @type {any[]} */ + const usages = []; + const blocks = extractCssTemplates(source); + for (const block of blocks) { + const { content, startLine } = block; + for (const v of extractVars(content, startLine)) { + usages.push({ ...v, file: relPath, package: packageName }); + } + for (const t of extractTemplates(content, startLine)) { + usages.push({ ...t, file: relPath, package: packageName }); + } + for (const l of extractLiterals(content, startLine)) { + usages.push({ ...l, file: relPath, package: packageName }); + } + } + + return { usages, imports, slugsInFile: [...slugsInFile] }; +} + +function main() { + /** @type {ExplorerConfig} */ + const cfg = readJson(CONFIG_PATH); + const pkgNames = new Set(cfg.componentPackages.map((p) => p.name)); + for (const ds of cfg.designSystems ?? []) { + if (!pkgNames.has(ds.package)) { + console.warn(`designSystems entry "${ds.id}" references unknown package "${ds.package}"`); + } + } + const registries = new Map(); + + const ensureRegistry = (themePackage, slug) => { + const key = `${themePackage}::${slug}`; + if (registries.has(key)) return registries.get(key); + const rootRel = cfg.themeRoots[themePackage]; + if (!rootRel) { + console.warn(`Unknown theme package: ${themePackage}`); + return null; + } + const indexPath = path.join(REPO_ROOT, rootRel, slug, 'index.ts'); + if (!fs.existsSync(indexPath)) { + console.warn(`Missing token index: ${indexPath}`); + return null; + } + const data = parseTokenIndexFile(indexPath, themePackage, slug); + registries.set(key, data); + return data; + }; + + /** Discover slugs from all configs first */ + const slugKeys = new Set(); + for (const pkg of cfg.componentPackages) { + const pkgAbs = path.join(REPO_ROOT, pkg.path); + const configs = findConfigFiles(pkgAbs); + for (const abs of configs) { + const src = fs.readFileSync(abs, 'utf8'); + const im = parseImports(src); + for (const [, refs] of im) { + for (const r of refs) { + slugKeys.add(`${r.themePackage}::${r.slug}`); + } + } + } + } + + for (const key of slugKeys) { + const [themePackage, slug] = key.split('::'); + ensureRegistry(themePackage, slug); + } + + /** @type {any[]} */ + const allUsages = []; + /** @type {Map>} tokenId -> component paths */ + const tokenComponents = new Map(); + /** @type {Map; gaps: any[] }>} */ + const componentSummary = new Map(); + + for (const pkg of cfg.componentPackages) { + const pkgAbs = path.join(REPO_ROOT, pkg.path); + const configs = findConfigFiles(pkgAbs); + for (const abs of configs) { + const rel = path.relative(REPO_ROOT, abs); + const { usages, imports, slugsInFile } = scanConfigFile(abs, rel, pkg.name, registries); + + const compKey = `${pkg.name}::${rel}`; + if (!componentSummary.has(compKey)) { + componentSummary.set(compKey, { tokens: new Set(), gaps: [] }); + } + const summary = componentSummary.get(compKey); + + for (const u of usages) { + let tokenId = null; + let resolved = false; + + if (u.type === 'template') { + const expr = u.expr; + const dot = expr.indexOf('.'); + const base = dot === -1 ? expr : expr.slice(0, dot); + const prop = dot === -1 ? null : expr.slice(dot + 1); + const binding = imports.get(base); + if (binding) { + for (const { themePackage, slug } of binding) { + const reg = registries.get(`${themePackage}::${slug}`); + if (!reg) continue; + const look = prop ? `${base}.${prop}` : base; + if (reg.exportToId.has(look)) { + tokenId = reg.exportToId.get(look); + resolved = true; + break; + } + if (!prop && reg.exportToId.has(base)) { + tokenId = reg.exportToId.get(base); + resolved = true; + break; + } + } + } + } else if (u.type === 'var') { + for (const key of slugsInFile) { + const reg = registries.get(key); + if (!reg) continue; + const ids = reg.cssVarToIds.get(u.cssVar); + if (ids && ids.length) { + tokenId = ids[0]; + resolved = true; + break; + } + } + } + + if (u.type === 'literal') { + summary.gaps.push({ kind: 'literal', ...u }); + allUsages.push({ + package: pkg.name, + configPath: rel, + line: u.line, + kind: 'literal', + tokenId: null, + raw: u.raw, + }); + continue; + } + + if (u.type === 'var' && !resolved) { + summary.gaps.push({ kind: 'unresolvedVar', ...u }); + allUsages.push({ + package: pkg.name, + configPath: rel, + line: u.line, + kind: 'unresolvedVar', + tokenId: null, + raw: u.raw, + }); + continue; + } + + if (u.type === 'template' && !resolved) { + summary.gaps.push({ kind: 'unresolvedTemplate', ...u }); + allUsages.push({ + package: pkg.name, + configPath: rel, + line: u.line, + kind: 'unresolvedTemplate', + tokenId: null, + raw: u.raw, + }); + continue; + } + + if (tokenId) { + summary.tokens.add(tokenId); + if (!tokenComponents.has(tokenId)) tokenComponents.set(tokenId, new Set()); + tokenComponents.get(tokenId).add(compKey); + } + + allUsages.push({ + package: pkg.name, + configPath: rel, + line: u.line, + kind: u.type === 'var' ? 'var' : 'template', + tokenId, + raw: u.raw, + }); + } + } + } + + const allTokens = []; + for (const reg of registries.values()) { + allTokens.push(...reg.tokens); + } + + const tokenUsageCount = {}; + for (const [tid, set] of tokenComponents) { + tokenUsageCount[tid] = set.size; + } + + const componentsOut = []; + for (const [key, { tokens, gaps }] of componentSummary) { + const [packageName, ...rest] = key.split('::'); + const configPath = rest.join('::'); + componentsOut.push({ + package: packageName, + configPath, + tokenIds: [...tokens], + gapCount: gaps.length, + gaps, + }); + } + + componentsOut.sort((a, b) => b.gapCount - a.gapCount); + + const payload = { + generatedAt: new Date().toISOString(), + designSystems: cfg.designSystems ?? [], + tokens: allTokens, + usages: allUsages, + tokenUsageCount, + components: componentsOut, + }; + + fs.mkdirSync(path.dirname(OUT_PATH), { recursive: true }); + fs.writeFileSync(OUT_PATH, JSON.stringify(payload, null, 0), 'utf8'); + console.log('Wrote', OUT_PATH, 'tokens:', allTokens.length, 'usages:', allUsages.length); +} + +main(); diff --git a/website/token-explorer/src/App.tsx b/website/token-explorer/src/App.tsx new file mode 100644 index 00000000000..eabb829c9ab --- /dev/null +++ b/website/token-explorer/src/App.tsx @@ -0,0 +1,827 @@ +import { useEffect, useMemo, useState } from 'react'; +import type { + ComponentRecord, + DesignSystem, + ExplorerPayload, + TokenRecord, + UsageRecord, +} from './types'; + +type View = 'tokens' | 'components' | 'gaps'; + +type UsageFilter = 'all' | 'used' | 'unused'; + +type CategorySubs = Record>; + +const COLOR_SUB_LABEL: Record = { + default: 'Default', + onDark: 'On dark', + onLight: 'On light', + inverse: 'Inverse', + _: 'Other', +}; + +const CATEGORY_ORDER = ['colors', 'spaces', 'borderRadii', 'shadows', 'typography', 'other']; + +const CATEGORY_LABELS: Record = { + colors: 'Colors', + spaces: 'Spaces', + borderRadii: 'Border radii', + shadows: 'Shadows', + typography: 'Typography', + other: 'Other', +}; + +const FRACTION_TITLE = + 'Tokens with ≥1 distinct config usage in this design system / total tokens in this group'; + +function typographyBaseExport(exportName: string): string { + const dot = exportName.indexOf('.'); + return dot === -1 ? exportName : exportName.slice(0, dot); +} + +function typographyFamilyAndVariant(exportName: string): { family: string; variant: string } { + const base = typographyBaseExport(exportName); + const m = base.match(/^(.+)(Bold|Medium)$/); + if (m) { + return { family: m[1], variant: m[2].toLowerCase() }; + } + return { family: base, variant: 'default' }; +} + +const TYPO_VARIANT_ORDER = ['default', 'bold', 'medium'] as const; + +const TYPO_VARIANT_LABEL: Record = { + default: 'Default', + bold: 'Bold', + medium: 'Medium', +}; + +function splitTypographyByVariant(list: TokenRecord[]): Record { + const buckets: Record = {}; + for (const t of list) { + const { variant } = typographyFamilyAndVariant(t.exportName); + if (!buckets[variant]) buckets[variant] = []; + buckets[variant].push(t); + } + for (const k of Object.keys(buckets)) { + buckets[k].sort((a, b) => a.exportName.localeCompare(b.exportName)); + } + return buckets; +} + +const COLOR_SEMANTIC_ORDER = [ + 'background', + 'data', + 'outline', + 'overlay', + 'surface', + 'text', + 'other', +] as const; + +const COLOR_SEMANTIC_LABEL: Record = { + background: 'Background', + data: 'Data', + outline: 'Outline', + overlay: 'Overlay', + surface: 'Surface', + text: 'Text', + other: 'Other', +}; + +function colorSemanticSubgroup(exportName: string, cssVar: string): string { + const ev = exportName.toLowerCase(); + const cv = cssVar.toLowerCase(); + let stem = ev; + if (stem.startsWith('inverse')) stem = stem.slice(7); + if (stem.startsWith('ondark')) stem = stem.slice(6); + if (stem.startsWith('onlight')) stem = stem.slice(7); + + if (stem.startsWith('data') || /^--data-/.test(cv)) return 'data'; + if (stem.startsWith('background') || /--background-/.test(cv) || cv === '--background') { + return 'background'; + } + if (stem.startsWith('surface') || /--surface-/.test(cv)) return 'surface'; + if (stem.startsWith('text') || /--text-/.test(cv)) return 'text'; + if (stem.startsWith('outline') || /--outline-/.test(cv)) return 'outline'; + if (stem.startsWith('overlay') || /--overlay-/.test(cv)) return 'overlay'; + if (stem.includes('gradient') || cv.includes('gradient')) { + if (/--text-/.test(cv) || stem.includes('text')) return 'text'; + if (/--surface-/.test(cv) || stem.includes('surface')) return 'surface'; + if (/--outline-/.test(cv) || stem.includes('outline')) return 'outline'; + return 'other'; + } + return 'other'; +} + +function usageCountFor(tokenUsageCount: Record, id: string) { + return tokenUsageCount[id] ?? 0; +} + +function usedTotalForTokens( + tokens: TokenRecord[], + tokenUsageCount: Record, +): { used: number; total: number } { + const total = tokens.length; + const used = tokens.filter((t) => usageCountFor(tokenUsageCount, t.id) > 0).length; + return { used, total }; +} + +function flattenSubs(subs: CategorySubs): TokenRecord[] { + const out: TokenRecord[] = []; + for (const v of Object.values(subs)) { + if (Array.isArray(v)) { + out.push(...v); + } else { + for (const list of Object.values(v)) { + out.push(...list); + } + } + } + return out; +} + +function TokenHeaderFraction({ used, total }: { used: number; total: number }) { + return ( + + {used}/{total} + + ); +} + +function tokenUsageCountFromUsages(usages: UsageRecord[]): Record { + const m = new Map>(); + for (const u of usages) { + if (!u.tokenId) continue; + const compKey = `${u.package}::${u.configPath}`; + if (!m.has(u.tokenId)) m.set(u.tokenId, new Set()); + m.get(u.tokenId)!.add(compKey); + } + const out: Record = {}; + for (const [tid, set] of m) out[tid] = set.size; + return out; +} + +function groupTokens( + tokens: TokenRecord[], + search: string, + usageFilter: UsageFilter, + tokenUsageCount: Record, +): Record { + let filtered = tokens; + if (usageFilter === 'used') { + filtered = filtered.filter((t) => usageCountFor(tokenUsageCount, t.id) > 0); + } else if (usageFilter === 'unused') { + filtered = filtered.filter((t) => usageCountFor(tokenUsageCount, t.id) === 0); + } + + const q = search.trim().toLowerCase(); + if (q) { + filtered = filtered.filter( + (t) => + t.exportName.toLowerCase().includes(q) || + t.cssVar.toLowerCase().includes(q) || + t.slug.toLowerCase().includes(q) || + t.themePackage.toLowerCase().includes(q), + ); + } + + const tree: Record = {}; + for (const t of filtered) { + const cat = t.category; + if (cat === 'colors') { + const palette = t.colorSubgroup ?? '_'; + const semantic = colorSemanticSubgroup(t.exportName, t.cssVar); + if (!tree[cat]) tree[cat] = {}; + if (!tree[cat][palette]) tree[cat][palette] = {}; + const paletteMap = tree[cat][palette] as Record; + if (!paletteMap[semantic]) paletteMap[semantic] = []; + paletteMap[semantic].push(t); + } else { + let sub: string; + if (cat === 'typography') { + sub = typographyFamilyAndVariant(t.exportName).family; + } else { + sub = '_'; + } + if (!tree[cat]) tree[cat] = {}; + if (!tree[cat][sub]) tree[cat][sub] = []; + (tree[cat][sub] as TokenRecord[]).push(t); + } + } + + for (const cat of Object.keys(tree)) { + if (cat === 'colors') { + for (const palette of Object.keys(tree[cat])) { + const paletteMap = tree[cat][palette] as Record; + for (const sem of Object.keys(paletteMap)) { + paletteMap[sem].sort((a, b) => a.exportName.localeCompare(b.exportName)); + } + } + } else { + for (const sub of Object.keys(tree[cat])) { + const leaf = tree[cat][sub]; + if (Array.isArray(leaf)) { + leaf.sort((a, b) => a.exportName.localeCompare(b.exportName)); + } + } + } + } + return tree; +} + +function subKeysForCategory(cat: string, subs: CategorySubs): string[] { + const keys = Object.keys(subs); + if (cat === 'colors') { + const order = ['default', 'onDark', 'onLight', 'inverse', '_']; + return [...order.filter((k) => keys.includes(k)), ...keys.filter((k) => !order.includes(k))]; + } + if (cat === 'typography') { + const rest = keys.filter((k) => k !== '_').sort((a, b) => a.localeCompare(b)); + if (keys.includes('_')) rest.push('_'); + return rest.length ? rest : ['_']; + } + return ['_']; +} + +function TokenSidebar({ + grouped, + selectedId, + onSelect, + tokenUsageCount, +}: { + grouped: Record; + selectedId: string | null; + onSelect: (id: string) => void; + tokenUsageCount: Record; +}) { + const renderTokenButton = (t: TokenRecord) => { + const n = usageCountFor(tokenUsageCount, t.id); + return ( + + ); + }; + + if (Object.keys(grouped).length === 0) { + return

No tokens match search or usage filter.

; + } + + const renderSubgroupSummary = (label: string, list: TokenRecord[]) => { + const { used, total } = usedTotalForTokens(list, tokenUsageCount); + return ( + + {label} + + + ); + }; + + const renderCategoryBody = (cat: string, subs: CategorySubs) => { + if (cat === 'colors') { + return subKeysForCategory(cat, subs).map((paletteKey) => { + const paletteVal = subs[paletteKey]; + if (!paletteVal || typeof paletteVal !== 'object' || Array.isArray(paletteVal)) return null; + const paletteMap = paletteVal as Record; + const paletteList = Object.values(paletteMap).flat(); + if (!paletteList.length) return null; + const paletteLabel = paletteKey === '_' ? 'Other' : COLOR_SUB_LABEL[paletteKey] ?? paletteKey; + const semanticKeys = [ + ...COLOR_SEMANTIC_ORDER.filter((k) => paletteMap[k]?.length), + ...Object.keys(paletteMap) + .filter((k) => !(COLOR_SEMANTIC_ORDER as readonly string[]).includes(k)) + .sort(), + ]; + return ( +
+ {renderSubgroupSummary(paletteLabel, paletteList)} +
+ {semanticKeys.map((sem) => { + const list = paletteMap[sem]; + if (!list?.length) return null; + const semLabel = COLOR_SEMANTIC_LABEL[sem] ?? sem; + return ( +
+ {renderSubgroupSummary(semLabel, list)} +
{list.map(renderTokenButton)}
+
+ ); + })} +
+
+ ); + }); + } + if (cat === 'typography') { + return subKeysForCategory(cat, subs).map((sub) => { + const list = subs[sub]; + if (!list || !Array.isArray(list) || !list.length) return null; + const label = sub === '_' ? 'Other' : sub; + const byVariant = splitTypographyByVariant(list); + const extraVariants = Object.keys(byVariant) + .filter((v) => !(TYPO_VARIANT_ORDER as readonly string[]).includes(v)) + .sort(); + return ( +
+ {renderSubgroupSummary(label, list)} +
+ {TYPO_VARIANT_ORDER.filter((v) => byVariant[v]?.length).map((v) => ( +
+ {renderSubgroupSummary(TYPO_VARIANT_LABEL[v] ?? v, byVariant[v])} +
+ {byVariant[v].map(renderTokenButton)} +
+
+ ))} + {extraVariants.map((v) => ( +
+ {renderSubgroupSummary(v, byVariant[v])} +
+ {byVariant[v].map(renderTokenButton)} +
+
+ ))} +
+
+ ); + }); + } + return subKeysForCategory(cat, subs).map((sub) => { + const list = subs[sub]; + if (!list || !Array.isArray(list) || !list?.length) return null; + return ( +
+ {renderSubgroupSummary('All', list)} +
{list.map(renderTokenButton)}
+
+ ); + }); + }; + + const renderCategorySection = (cat: string) => { + const subs = grouped[cat]; + const catTokens = flattenSubs(subs); + const { used, total } = usedTotalForTokens(catTokens, tokenUsageCount); + return ( +
+ + {CATEGORY_LABELS[cat] ?? cat} + + +
{renderCategoryBody(cat, subs)}
+
+ ); + }; + + return ( + <> + {CATEGORY_ORDER.filter((c) => grouped[c]).map((cat) => renderCategorySection(cat))} + {Object.keys(grouped) + .filter((c) => !CATEGORY_ORDER.includes(c)) + .map((cat) => renderCategorySection(cat))} + + ); +} + +export function App() { + const [data, setData] = useState(null); + const [error, setError] = useState(null); + const [view, setView] = useState('tokens'); + const [search, setSearch] = useState(''); + const [usageFilter, setUsageFilter] = useState('all'); + const [selectedId, setSelectedId] = useState(null); + const [pkgFilter, setPkgFilter] = useState(''); + const [designSystemId, setDesignSystemId] = useState(''); + + useEffect(() => { + fetch('/token-explorer.data.json') + .then((r) => { + if (!r.ok) throw new Error(`HTTP ${r.status}`); + return r.json(); + }) + .then(setData) + .catch((e) => setError(String(e.message || e))); + }, []); + + const designSystems: DesignSystem[] | null = data?.designSystems?.length + ? data.designSystems + : null; + + useEffect(() => { + if (!designSystems?.length) return; + setDesignSystemId((id) => { + if (id && designSystems.some((d) => d.id === id)) return id; + return designSystems[0].id; + }); + }, [designSystems]); + + const activeDesignSystem = useMemo(() => { + if (!designSystems?.length) return null; + return designSystems.find((d) => d.id === designSystemId) ?? designSystems[0] ?? null; + }, [designSystems, designSystemId]); + + useEffect(() => { + setSelectedId(null); + }, [designSystemId]); + + const tokenMap = useMemo(() => { + const m = new Map(); + if (!data) return m; + for (const t of data.tokens) m.set(t.id, t); + return m; + }, [data]); + + const scopedTokens = useMemo(() => { + if (!data) return []; + if (!activeDesignSystem) return data.tokens; + return data.tokens.filter((t) => activeDesignSystem.tokenSlugs.includes(t.slug)); + }, [data, activeDesignSystem]); + + const scopedUsages = useMemo(() => { + if (!data) return []; + if (!activeDesignSystem) return data.usages; + return data.usages.filter((u) => u.package === activeDesignSystem.package); + }, [data, activeDesignSystem]); + + const scopedTokenUsageCount = useMemo( + () => tokenUsageCountFromUsages(scopedUsages), + [scopedUsages], + ); + + const grouped = useMemo( + () => + data + ? groupTokens(scopedTokens, search, usageFilter, scopedTokenUsageCount) + : {}, + [data, scopedTokens, search, usageFilter, scopedTokenUsageCount], + ); + + const usagesForToken = useMemo(() => { + if (!data || !selectedId) return []; + return data.usages.filter((u) => { + if (u.tokenId !== selectedId) return false; + if (activeDesignSystem && u.package !== activeDesignSystem.package) return false; + return true; + }); + }, [data, selectedId, activeDesignSystem]); + + const selectedToken = selectedId ? tokenMap.get(selectedId) ?? null : null; + + const packages = useMemo(() => { + if (!data) return []; + return [...new Set(data.components.map((c) => c.package))].sort(); + }, [data]); + + const filteredComponents = useMemo(() => { + if (!data) return []; + let rows = data.components; + if (activeDesignSystem) rows = rows.filter((c) => c.package === activeDesignSystem.package); + else if (pkgFilter) rows = rows.filter((c) => c.package === pkgFilter); + if (search.trim()) { + const q = search.toLowerCase(); + rows = rows.filter((c) => c.configPath.toLowerCase().includes(q)); + } + return rows; + }, [data, activeDesignSystem, pkgFilter, search]); + + const gapLeaders = useMemo(() => { + if (!data) return []; + let rows = [...data.components].sort((a, b) => b.gapCount - a.gapCount); + if (activeDesignSystem) rows = rows.filter((c) => c.package === activeDesignSystem.package); + return rows; + }, [data, activeDesignSystem]); + + if (error) { + return ( +
+

Could not load data: {error}

+

+ Run npm run generate:data from website/token-explorer. +

+
+ ); + } + + if (!data) { + return
Loading token data…
; + } + + return ( +
+
+

Design token explorer

+ {designSystems && activeDesignSystem && ( + + )} + + setSearch(e.target.value)} + /> + {view === 'tokens' && ( + + )} + {view === 'components' && !activeDesignSystem && ( + + )} + Generated {new Date(data.generatedAt).toLocaleString()} +
+ + {view === 'tokens' && ( + <> + +
+ {selectedToken ? ( + + ) : ( +

Select a token in the sidebar.

+ )} +
+ + )} + + {view === 'components' && ( +
+ +
+ )} + + {view === 'gaps' && ( +
+ +
+ )} +
+ ); +} + +function TokenDetail({ + token, + usageCount, + usages, +}: { + token: TokenRecord; + usageCount: number; + usages: UsageRecord[]; +}) { + const byFile = useMemo(() => { + const m = new Map(); + for (const u of usages) { + const k = `${u.package}::${u.configPath}`; + if (!m.has(k)) m.set(k, []); + m.get(k)!.push(u); + } + return m; + }, [usages]); + + return ( + <> +

{token.exportName}

+
+
CSS variable
+
+ {token.cssVar} +
+
Theme
+
+ {token.themePackage} / {token.slug} +
+
Category
+
+ {CATEGORY_LABELS[token.category] ?? token.category} + {token.colorSubgroup + ? ` · ${COLOR_SUB_LABEL[token.colorSubgroup] ?? token.colorSubgroup}` + : ''} +
+
Value
+
+ {token.valuePreview} +
+
Components (distinct)
+
{usageCount}
+
+

Usages ({usages.length})

+
    + {[...byFile.entries()].map(([key, list]) => ( +
  • + {list[0].package} + {list[0].configPath} + {list.map((u, i) => ( +
    + L{u.line} · {u.kind} · {u.raw} +
    + ))} +
    • + ))} +
+ + ); +} + +function ComponentsTable({ rows, tokenMap }: { rows: ComponentRecord[]; tokenMap: Map }) { + const [expanded, setExpanded] = useState(null); + return ( + + + + + + + + + + + {rows.map((c) => { + const key = `${c.package}::${c.configPath}`; + const isOpen = expanded === key; + return ( + + + + + + + ); + })} + +
PackageConfigTokensGaps
{c.package} + {c.configPath} + + {isOpen && ( +
+
+ Tokens +
+
    + {c.tokenIds.slice(0, 80).map((id) => ( +
  • + {tokenMap.get(id)?.exportName ?? id} +
    • + ))} + {c.tokenIds.length > 80 &&
  • … {c.tokenIds.length - 80} more
    • } +
+ {c.gaps.length > 0 && ( + <> +
+ Gaps +
+
    + {c.gaps.map((g, i) => ( +
  • + L{g.line} · {g.kind} · {g.raw} +
    • + ))} +
+ + )} +
+ )} + 		{c.tokenIds.length}{c.gapCount}
+ ); +} + +function GapsDashboard({ + rows, + pkgFilter, + onPkgFilter, + packages, + pathQuery, + lockPackageFilter, +}: { + rows: ComponentRecord[]; + pkgFilter: string; + onPkgFilter: (v: string) => void; + packages: string[]; + pathQuery: string; + lockPackageFilter?: boolean; +}) { + let filtered = pkgFilter ? rows.filter((r) => r.package === pkgFilter) : rows; + const q = pathQuery.trim().toLowerCase(); + if (q) filtered = filtered.filter((r) => r.configPath.toLowerCase().includes(q)); + const withGaps = filtered.filter((r) => r.gapCount > 0); + + return ( + <> +

+ Configs with at least one unresolved var(--*), unresolved template interpolation{' '} + {'${ … }'}, or raw dimension literal. +

+ {!lockPackageFilter && ( + + )} + + + + + + + + + + + {withGaps.map((c) => ( + + + + + + + ))} + +
PackageConfigGap countSample
{c.package} + {c.configPath} + {c.gapCount} + {c.gaps[0]?.raw ?? '—'} +
+ {withGaps.length === 0 &&

No gaps in this filter.

} + + ); +} diff --git a/website/token-explorer/src/index.css b/website/token-explorer/src/index.css new file mode 100644 index 00000000000..9ea700f55a5 --- /dev/null +++ b/website/token-explorer/src/index.css @@ -0,0 +1,385 @@ +:root { + font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; + font-size: 13px; + line-height: 1.45; + color: #e8e6e3; + background: #12100e; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; +} + +#root { + min-height: 100vh; +} + +a { + color: #7ad7c8; +} + +button { + font: inherit; + cursor: pointer; + border: 1px solid #3d3834; + background: #1c1917; + color: inherit; + padding: 0.35rem 0.65rem; + border-radius: 4px; +} + +button.active { + border-color: #7ad7c8; + background: #1a2e2a; +} + +input[type='search'], +select { + font: inherit; + padding: 0.35rem 0.5rem; + border: 1px solid #3d3834; + background: #1c1917; + color: inherit; + border-radius: 4px; + min-width: 12rem; +} + +header select.usage-filter { + min-width: 9rem; +} + +.design-system-select { + display: flex; + flex-direction: column; + gap: 0.2rem; +} + +.design-system-select-label { + font-size: 0.65rem; + text-transform: uppercase; + letter-spacing: 0.06em; + color: #8a827b; +} + +.design-system-select select { + min-width: 14rem; + max-width: min(28rem, 100%); +} + +.layout { + display: grid; + grid-template-columns: minmax(260px, 340px) 1fr; + grid-template-rows: auto 1fr; + height: 100vh; + gap: 0; +} + +header { + grid-column: 1 / -1; + display: flex; + align-items: center; + gap: 1rem; + flex-wrap: wrap; + padding: 0.6rem 1rem; + border-bottom: 1px solid #2a2522; + background: #0d0c0b; +} + +header h1 { + margin: 0; + font-size: 1rem; + font-weight: 600; + letter-spacing: -0.02em; +} + +.nav { + display: flex; + gap: 0.35rem; +} + +.sidebar { + border-right: 1px solid #2a2522; + overflow: auto; + padding: 0.25rem 0; +} + +details.token-group { + border-bottom: 1px solid #2a2522; +} + +details.token-group > summary.token-group-summary { + padding: 0.5rem 0.75rem; + cursor: pointer; + font-size: 0.72rem; + letter-spacing: 0.06em; + color: #c4bcb4; + font-weight: 600; + list-style: none; + user-select: none; +} + +details.token-group > summary.token-group-summary .token-header-title { + text-transform: uppercase; +} + +details.token-group > summary.token-group-summary::-webkit-details-marker { + display: none; +} + +details.token-group > summary.token-group-summary::before { + content: '▸ '; + display: inline-block; + transition: transform 0.12s ease; + color: #8a827b; +} + +details.token-group[open] > summary.token-group-summary::before { + transform: rotate(90deg); +} + +.token-group-body { + padding: 0 0 0.35rem 0; +} + +details.token-subgroup { + margin: 0 0 0.25rem 0; + border-left: 2px solid #2a2522; + margin-left: 0.5rem; +} + +details.token-subgroup > summary.token-subgroup-summary { + padding: 0.35rem 0.65rem 0.35rem 0.5rem; + cursor: pointer; + font-size: 0.7rem; + font-weight: 600; + color: #a69f97; + list-style: none; + user-select: none; +} + +details.token-subgroup > summary.token-subgroup-summary::-webkit-details-marker { + display: none; +} + +details.token-subgroup > summary.token-subgroup-summary::before { + content: '▸ '; + color: #6d6660; + font-size: 0.65rem; +} + +details.token-subgroup[open] > summary.token-subgroup-summary::before { + content: '▾ '; +} + +summary.token-header-with-fraction { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: 0.75rem; +} + +.token-header-title { + flex: 1; + min-width: 0; +} + +.token-header-fraction { + flex-shrink: 0; + font-weight: 500; + font-variant-numeric: tabular-nums; + color: #8a827b; +} + +details.token-group > summary.token-header-with-fraction .token-header-fraction { + font-size: 0.7rem; +} + +.token-color-semantics { + margin: 0 0 0.15rem 0.35rem; + padding-left: 0.25rem; + border-left: 1px solid #2a2522; +} + +details.token-color-semantic { + margin: 0 0 0.2rem 0; +} + +details.token-color-semantic > summary.token-subgroup-summary { + font-size: 0.68rem; + font-weight: 500; + color: #8f8880; +} + +.token-typography-variants { + margin: 0 0 0.15rem 0.35rem; + padding-left: 0.25rem; + border-left: 1px solid #2a2522; +} + +details.token-typography-variant { + margin: 0 0 0.2rem 0; +} + +details.token-typography-variant > summary.token-subgroup-summary { + font-size: 0.68rem; + font-weight: 500; + color: #8f8880; +} + +.token-subgroup-list { + padding-bottom: 0.25rem; +} + +.group-label { + padding: 0.25rem 1rem; + font-size: 0.75rem; + color: #a69f97; +} + +.token-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.5rem; + width: 100%; + text-align: left; + border: none; + border-radius: 0; + border-left: 3px solid transparent; + padding: 0.35rem 0.5rem 0.35rem 0.4rem; + background: transparent; + color: #d6d1cc; + cursor: pointer; + font-size: 12px; +} + +.token-item-name { + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.token-item-count { + flex-shrink: 0; + font-size: 10px; + font-variant-numeric: tabular-nums; + color: #8a827b; + padding: 0.1rem 0.35rem; + border-radius: 3px; + background: #1c1917; +} + +.token-item.selected .token-item-count { + color: #9edfd8; + background: #243330; +} + +.token-item:hover { + background: #1c1917; +} + +.token-item.selected { + border-left-color: #7ad7c8; + background: #1a2422; +} + +.main { + overflow: auto; + padding: 1rem 1.25rem; +} + +.meta { + font-size: 11px; + color: #8a827b; + margin-bottom: 1rem; +} + +.detail-grid { + display: grid; + gap: 0.35rem; + margin-bottom: 1.25rem; +} + +.detail-grid dt { + color: #8a827b; + font-size: 11px; + margin: 0; +} + +.detail-grid dd { + margin: 0 0 0.5rem 0; + word-break: break-all; +} + +.usage-list { + list-style: none; + padding: 0; + margin: 0; + max-height: 42vh; + overflow: auto; + border: 1px solid #2a2522; + border-radius: 6px; +} + +.usage-list li { + padding: 0.4rem 0.65rem; + border-bottom: 1px solid #2a2522; + font-size: 12px; +} + +.usage-list li:last-child { + border-bottom: none; +} + +.badge { + display: inline-block; + font-size: 10px; + padding: 0.1rem 0.35rem; + border-radius: 3px; + background: #2a2522; + margin-right: 0.35rem; + color: #c4bcb4; +} + +table { + width: 100%; + border-collapse: collapse; + font-size: 12px; +} + +th, +td { + text-align: left; + padding: 0.4rem 0.5rem; + border-bottom: 1px solid #2a2522; + vertical-align: top; +} + +th { + color: #8a827b; + font-weight: 600; + font-size: 11px; +} + +tr:hover td { + background: #1a1816; +} + +.empty { + color: #8a827b; + padding: 2rem; + text-align: center; +} + +.sidebar-empty { + margin: 1rem 0.75rem; + font-size: 12px; + color: #8a827b; + line-height: 1.4; +} diff --git a/website/token-explorer/src/main.tsx b/website/token-explorer/src/main.tsx new file mode 100644 index 00000000000..d1694d13769 --- /dev/null +++ b/website/token-explorer/src/main.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { App } from './App'; +import './index.css'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/website/token-explorer/src/types.ts b/website/token-explorer/src/types.ts new file mode 100644 index 00000000000..7a831786f4b --- /dev/null +++ b/website/token-explorer/src/types.ts @@ -0,0 +1,43 @@ +export interface TokenRecord { + id: string; + exportName: string; + cssVar: string; + valuePreview: string; + category: string; + colorSubgroup: string | null; + themePackage: string; + slug: string; +} + +export interface UsageRecord { + package: string; + configPath: string; + line: number; + kind: string; + tokenId: string | null; + raw: string; +} + +export interface ComponentRecord { + package: string; + configPath: string; + tokenIds: string[]; + gapCount: number; + gaps: { kind: string; line: number; raw: string }[]; +} + +export interface DesignSystem { + id: string; + label: string; + package: string; + tokenSlugs: string[]; +} + +export interface ExplorerPayload { + generatedAt: string; + designSystems?: DesignSystem[]; + tokens: TokenRecord[]; + usages: UsageRecord[]; + tokenUsageCount: Record; + components: ComponentRecord[]; +} diff --git a/website/token-explorer/src/vite-env.d.ts b/website/token-explorer/src/vite-env.d.ts new file mode 100644 index 00000000000..11f02fe2a00 --- /dev/null +++ b/website/token-explorer/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/website/token-explorer/tsconfig.json b/website/token-explorer/tsconfig.json new file mode 100644 index 00000000000..3c10033e07f --- /dev/null +++ b/website/token-explorer/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "ES2022", + "useDefineForClassFields": true, + "lib": ["ES2022", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": false, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + }, + "include": ["src", "src/vite-env.d.ts"] +} diff --git a/website/token-explorer/tsconfig.node.json b/website/token-explorer/tsconfig.node.json new file mode 100644 index 00000000000..d7a796e6211 --- /dev/null +++ b/website/token-explorer/tsconfig.node.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "target": "ES2022", + "lib": ["ES2023"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "strict": true, + "noEmit": true + }, + "include": ["vite.config.ts"] +} diff --git a/website/token-explorer/vite.config.ts b/website/token-explorer/vite.config.ts new file mode 100644 index 00000000000..668f7b5d8bc --- /dev/null +++ b/website/token-explorer/vite.config.ts @@ -0,0 +1,12 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import path from 'node:path'; + +export default defineConfig({ + plugins: [react()], + resolve: { + alias: { + '@': path.resolve(__dirname, 'src'), + }, + }, +});